I am after a JavaScript Rich Text Editor that supports highlighting words and triggering events when those highlighted words are clicked, like what Gmail does when in spellcheck mode.
I will need to heavily customize any existing solution, so something that is easy to extend would be ideal. Currently I am leaning towards TinyMCE.
Richtextbox or HTML?
If it is HTML, then you should stick with TinyMCE. :
It's (very) easy to integrate
It works across browsers
The toolbars were easy to modify
Wordpress uses it!
For what its worth, we also looked at FCKEditor but preferred TinyMCE
UPDATE: While some users wanted it, spell checking has never been on the "essentials" list. It has always been quicker / cheaper for us to teach the handful of users how to use the spell checking features of IE, Firefox or Chrome instead of putting it in the editor.
Imagine trying to code the 3 been soup example!!!
TinyMCE seems to be the best one these days. You might want to take a look at FCKEditor and HTMLArea as well. You can find a list of such WYSIWYG HTML editors here.
Related
I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
When one enters a question on StackOverflow, just above the text entry box is a set of Javascript buttons to do things like make text bold or italic, and to insert pictures and links.
I want to create a similar set of buttons for my own custom Content Management System (CMS). I was hoping that this would not be the kind of task that I would have to re-invent the wheel for.
However, the only set of buttons I have come across is TinyMCE, which, to say the least is incredibly feature-bloated.
I only need the ability to select text, and then have it be modified to be bold, italic, or a link, using the syntax of my CMS.
After some examination, it seems to me that paring down TinyMCE down to that level would be more difficult than writing from scratch.
Is are an existing toolbox that I can use to help me create these kinds of buttons (or perhaps a tutorial) that is ideally open source and not overly feature rich?
Note that I am not that great at Javascript programming, so while most programmers would probably assume this was easily done from scratch, I need a starting point to see how it is done.
Thank you for any advice.
These are some of the tools like TinyMce , all are open source.
Alternative to Tinymce
In a previous post that I posted here, I got responses that contentEditable and designMode are bad practices. So I switched to TinyMCE, but that uses designMode as well... is there something bad about it?
Im using it for a Rich Text editor on my website fyi.
They were trying to tell you not to re-invent the wheel.
If you're using designMode, you probably want either a rich text editor (with toolbars) or a syntax-highlighting code editor.
In either case, you should reuse existing libraries rather than re-creating them from scratch. (Rich text editors are hard, especially across browsers)
In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.
If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.
Basically, you use contentEditable and execCommand to turn the browser into an RTE.
document.getElementById('edit').contentDocument.designMode = "on";
Have a look at http://www.mozilla.org/editor/ie2midas.html
There is http://www.gosu.pl/steditor/ which code is quite simple and clear. It uses designMode and execCommand as was mentioned in other answers.
Alternatively use simple languages like markdown or textile and provide a live preview.
I think most people will get asterisks for emphasis and double ones for bolding.
I've used YUI's wysiwyg editor in the past and it lets you configure the the buttons so you could easily use it and limit the buttons to bold/italic/underline.
I am intended to develop a rich input textarea similar to Google mail. Any ideal or resource to share? Thanks in advance!
My suggestion is to use TinyMCE it is a great Rich Text Box. Yahoo also has a really great Rich Text Editor (which has been deprecated).
These are not textareas, btw - they are IFRAMEs holding full HTML managed by the editor code. I also recommend FCKeditor - very configurable and easily integrated. You can write your code using textareas, make a javascript call and those textareas go hidden and the IFRAME gets injected in place. Upon submit the html gets copied back in the textarea. so really don't need to do much...
I am not sure what google uses, but I've used FCKEditor and it worked out great.
Look at the ContentEditable tag. And also have a look at Squire on gihub which is an open source rich text editor that is very lightweight and flexible (used in opera's mail client)
The editors given in the other answers are very heavy and come with their own (outdated, bloated) UI components.