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. :)
Related
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.
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
Developing a community site where everyone can post text,
I'm looking for a markup filter:
What is not part of the markup must be escaped (htmlspecialchars()) as it is.
Should turn URL-s automatically into links
Should support some form of basic markups (bold, image, url, pre, list)
Should have a simple parser, that turns user input text into HTML
Content on the site is public to everyone, XSS must not allowed to happen.
What do you suggest? What markup language in the first place? BBCode? Wiki? Markdown? Are there any complete API-s with good examples?
PHP is available on the server side. If there is a WYSIWYG-like texarea in addition (like here on SO) that would be a fantastic bonus!
BBCode is old and it's very verbose (pretty much HTML) but both CKEditor and TinyMCE supports it.
Wiki syntax is somewhat confusing to new users and you have to override the CamelCased words.
Markdown seems to be the de facto standard of today's web applications and StackOverflow uses it. There is a very good PHP implementation, not sure about RTEs but StackOverflow uses WYM Editor.
Also, check out the Wikipedia entry on Lightweight Markup Languages.
I think I'm going to go with BBCode via NBBC: http://nbbc.sourceforge.net/
Great list of tags supported, auto-detects complicated link, configurable, slim implementation.
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.
What text to HTML converter for PHP would you recommend?
One of the examples would be Markdown, which is used here at SO. User just types some text into the text-box with some natural formatting: enters at the end of line, empty line at the end of paragraph, asterisk delimited bold text, etc. And this syntax is converted to HTML tags.
The simplicity is the main feature we are looking for, there does not need to be a lot of possibilities but those basic that are there should be very intuitive (automatic URL conversion to link, emoticons, paragraphs).
A big plus would be if there is WYSIWYG editor for it. Half-wysiwig just like here at SO would be even better.
Extra points would be if it would fit with Zend Framework well.
Take your pick at http://en.wikipedia.org/wiki/Lightweight_markup_language.
As for Markdown, there's one PHP parser that I've been using called PHP Markdown, and I especially like the Extra extension.
I have actually taken a stab at extending it with my own (undocumented) features. It's available at GitHub (remember that it's the extra branch I've fixed, not the masteR), if you're interested. I've intended on making it a 'proper fork' for a while, but that's another, largely offtopic, story.
The Zend Framework has a WYSIWYG editor bundled with it's Dojo integration.
http://framework.zend.com/manual/en/zend.dojo.form.html#zend.dojo.form.elements.editor
... Bring on the extra points!
There's always textile. It is widely implemented, and has a few basic similarities with Markdown. However, I have never seen a WYSIWYG editor for Textile.
You might find upflow useful.
If you want WYSIWYG, I'm a big fan of FCKeditor. It converts user input to HTML before submitting the form, not after, but has a nice PHP library for using it, and a PHP connector for handling file uploading/browsing (along with several other languages).
If you want something that can be read as plain-text but output as HTML, I vote for Markdown.
I will stick with my original idea of adopting Texy.
None of the products mentioned here actually beats it. I had problem with Texys syntax but it seems to be quite standard and is present in other products too.
It is very lightweith, supports very natural syntax and has great "half" wysiwyg editor Texyla (wiki is in Czech only)