I'm coding my personal website in CodeIgniter, and I wish to integrate a blogging engine as well. Where can I find a WYSIWYG/custom input area which can render markup/HTML, like this one in StackExchange, or even something like the one in Wordpress. Are there any open source WYSIWYG input areas that don't destroy markup and display incorrect HTML?
P.S : Edited to clarify my question
I disagree WYSIWYG will destroy markup,
it works another way round that fix user broken markup
Example of open-source WYSIWYG editors such as,
CKEditor
TinyMCE
Or markup editor like
- Jquery MarkitUp
JavaScript Mootools framework has a WYISWYG you might want to check it out: mooeditable
Not sure if your on about WYISWYG or Syntax Highlighting
xehna WYISWYG -- is a good one that is desinged to build a full HTML site inside it you would need to control the system a little to allows every thing but it can do it
for syntax highlighting like Stack overflow does codemirror.net
Related
I've designed a basic blog app using php. For the entry, I've used a html form and used < textarea > for the main article of the blog. All works fine. The data is saved to a database and called up by other pages.
However, I'd like to be able to add formatting to this so other users who don't know to wrap tags around things can also post an entry. The type of thing I'm after is pretty much EXACTLY what is used here to post replies etc.
I'm guessing this would be either Javascript or php, but I don't have a clue how to go about it.
Probably you are looking for a web based Javascript HTML WYSIWYG editor, like
TinyMCE
NicEdit
among many others...
Here you have a few ones:
10 best WYSIWYG Text and HTML Editors for Your Next Project
15 Really Useful Web-based HTML Editors
Google: Javascript HTML WYSIWYG
Good luck!
You can use ckeditor or tiny mce editor
im using tinymce for my text editor, i wanted a code highlighting feature for one of the buttons on the toolbar, but i wanted a simple one like the one stackoverflow uses, deos anybody know of anything out there, or deos tinymce have something like this build in :)) thanks for the support!
p.s. im using the jquery tinymce
Stackoverflow uses the markup language Markdown. Server-side it's "rendered" by MarkdownSharp (C# implementation, but there are PHP ports as well). The client-side text editor is WMD.
Syntax highlighting is done using code-prettify.
See https://meta.stackexchange.com/questions/10369/which-tools-and-technologies-build-the-stack-exchange-network.
You probably won't be able to easily fold this into TinyMCE. You're either using Markdown, or a WYSIWYG text editor. Both at the same time is a contradiction.
What is the best solution for something that support:
rich editor
edit in place
placeholder
save HTML and strip out malicious etc.
I would like to have a nice and usable interface to change data on a profile.
It must support bold, italic and multi-line text and being sure that no malicious code can be injected.
I am looking mostly for the Javascript side but if it come with some PHP code for the backend, it would be nice.
FCK Editor which is now CKEditor
it is free.
I use TinyMCE (http://tinymce.moxiecode.com/). It should have the majority of the functionality you need.
I've seen a few options:
CKEditor (my personal favorite)
TinyMCE (also very popular)
NicEdit
YUI's Rich Text Editor (part of much larger, and very good, YUI framework)
Google's Closure Editor (part of Google's closure framework, what you get in GMail etc.)
Dijit Editor (if you're using the Dojo framework)
OpenWYSIWYG (true open source)
jwysiwyg (for jQuery)
Also see http://en.wikipedia.org/wiki/Online_rich-text_editor
and http://blog.insicdesigns.com/2009/07/rounding-up-the-best-javascript-wysiwyg-and-markup-editor/
I correctly use NicEdit but I would have changed to aloha-editor, an HTML5 WYSIWYG editor, if I had the time.
That said, I would not recommend any of those WYSIWYG editors as the html output is not only poor but also breaks the overall design by introducing a lot of inline styling that you probably did not expect for.
The only reason I use such an editor is that the client strictly asked for one. If you choose to use this method anyway, you would probably have to preprocess the user input. If I have a choice I use Markdown.
[EDIT: Added an example] As you can see in the html output below, what you see in not always what you get...
WYSIWYG Example:
Markdown Example:
I might be wrong (and please let me know if i am), but i don't believe TinyMCE nor CKedit do in place editing (that is, they do not use the contenteditable="true" without creating an iframe).
As far as i can tell, only nicedit ( http://nicedit.com/demos.php?demo=4 ) and google closure ( http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/editor/seamlessfield.html ) are able to edit inline.
I hope i'm wrong :)
cheers!
I'll recommend TinyMCE.
EDIT:
And #wajiw beat me to it. Good sign though. :)
I'm working on a fairly large CMS-like app that includes a forum, wiki pages, etc. What whould you chose between Markdown and HTML? I'm concerned about usability and the fact non-techie people will use this.
Markdown has a very simple syntax but few users know it
with HTML you can use a WYSIWYG editor but they are often terrible
I vote for Markdown.
I picked up Markdown in maybe 5 minutes in writing my first response here. Later
I learned more than what I picked up here, but I'd think this to be rather standard.
Markdown is much simpler to get good markup out of, and if you're worried about
speed just cache the resulting output.
Markdown is often better, and more easily understood, in plain text than HTML is
in a WYSIWYG editor. Also, no-script friendly.
And if you've got a user who wants an embeded object, just drop the HTML code from that Youtube video in and it'll get carried over.
If usability is an issue, and the target audience is non-geeks, WYSIWYG wins over Markdown. People are used to the toolbars with formatting buttons, but Markdown is a completely unknown markup language to most people (even "markup language" is completely unknown!).
I've had to explain a Markdown-lookalike wiki syntax to non-geeks at work, and they don't love it. When you want to write something, you want to write something, not look up weird ASCII syntax. Try not to interrupt the users' flow.
I would find a good WYSIWYG editor, like the one in WordPress (TinyMCE). It works ok.
If you wanted to use Markdown and a WYSIWYG editor you can use something like WMD Editor which (I am 99% sure) is what is used here at StackOverflow.
The benefit of using something like this is that your non-tech users get their WYSIWYG editor, your techie users get their Markdown love and you get clean markup. Another added side effect is it may actually teach end users Markdown from using it (or at least in an ideal world...)
WMD Editor also has an instant preview (which you can see when writing posts on StackOverflow), which will show users how changing the Markdown changes the look of their text.
We store XHTML in the database, validated against a restricted XHTML schema. The front-end is either a WYSIWYG editor (for the staff who know how to deal with its quirks) or a plain-text box (for the users, with automatic link detection etc.). We can convert the content back and forth, although the plain-text box loses formatting, so we do not depend on a specific UI. If we needed more than this, I would add another converter from XHTML to markdown.
I prefer Markdown with flat-file CMS, like Grav or other.
It's simpler to change styles, but not any html content. And you will take one killer feature: use git for web-site content. You even can create branches with "holiday" content.
Actually Markdown is simpler for non-tech people.
I can't seem to find a js RTE that will play friendly with snippets of php intertwined in it. I want a mini CMS for the backend of a number of sites. The views have some snippets of php here and there
Are there any RTE's that will leave the php alone, and even show it mixed with the nice formatting?
TinyMCE kills the tags even when entered in html mode and switched back and forth. FCKEdit seems to keep the code intact if pasted into source mode, but it isn't shown in the editing side, so if someone deletes an element with some php in it, bop, it's gone.
And none of the editors like creating nicely indented code, that would be a nice plus as well, but probably over the top to ask, heh.
The Javascript rich text editors make use of the browsers' in-built DesignMode or ContentEditable features in order to implement in-line HTML editing, and these do not support embedded PHP tags.
The solution would have to convert these to some other form, which is not going to get mushed by the browser's HTML editor, then convert them back to PHP tags upon submission.
It could be done. I don't know of any that do, however.
As for creating nicely indented code, it is a similar issue. The browsers munge it in their in-line HTML editors.
I had a similar question a few weeks back:
Textarea that can do syntax highlighting on the fly?
This may be the right thing for you:
http://marijn.haverbeke.nl/codemirror/
They even have mixed PHP and HTML highlighting.