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.
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
Here is the demo:
http://www.kevinroth.com/rte/demo.htm
when I use firebugs to inspect the source code, I see that it is iFrame only, but how can the iFrame have a text area behavior?? Any ideas on how to implement this? Thank in
As I'm doing this for my job right now, I've done a small amount of of research. From what I have figured out, there are two ways to accomplish this:
document.designMode
Using document.designMode in JavaScript which sets the whole HTML document to be editable. As the whole HTML document is editable, presumably an iframe is needed to encapsulate the editing, so that the user can't edit any part of the page you don't want editing.
From what I can tell, the demo you linked and TinyMCE uses this method.
contenteditable
The contenteditable HTML attribute is similar but doesn't require an iframe to be used. You add the attribute to a tag and all of the HTML within it becomes editable with a blinking cursor.
Here is a demo of it: http://html5demos.com/contenteditable
Notes
Personally I'll be looking at contenteditable for my task. Here is good overview and details on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
As I say I have done limited research on this, so please help me correct any errors :)
In that frame you can see a full HTML source that builds up something that looks like a text area + toolbar + stuff. A complicated Javascript is doing all the trick behind. E.g. if you select some text and make it bold with the toolbar than the script places <strong> tags around your text and so on..
Use http://www.tinymce.com/ It is the best rich editor out there. Works great with any browser and it has many many options. It's very easy to use. Just look at the examples and docs. It's included with many popular blogs and CMS.
I want to write a very simple WYSIWYG editor, but i don't understand how do they work :(
I've tried to read sources of tinyMCE but stuck in all those classes and functions.
As I know they're creating iframe then do some black magic there and everything works.
The question is: what do those editors do with iframe so it becomes editable?
Thank you.
The keywords are contentEditable and designMode.
Good sources to get started:
Rich-Text Editing in Mozilla (MDC)
element.contentEditable in Mozilla (MDC)
contentEditable in IE (MSDN)
very simple means you want little extension? In such case, you will like http://code.google.com/p/jwysiwyg/
Its constructor is really simple, but not good for extension works.
You can search JQuery. I think there's huge amount of HTML editor or rich text editor available.
By the way, the HTML editor inside Extjs is the worst thing I have ever seen.
Google released yesterday an open source editor:
http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html
A quick look at it shows an IFRAME with the BODY tag with the attribute: contentEditable
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.
I implemented the Yahoo Rich Text Editor (YUI Editor) in a Rails application using the YUI_Editor Plugin.
If I copy/paste text out of a PDF into a YUI-Editor-enhanced-TextArea (YEETA :)) it does not only copy the text but also the formatting of it.
How do I configure the YUI Editor to remove all formatting of text pasted into the YEETA before inserting it?
I'm intrested in your answer even if you're not working with Rails and/or using the YUI_Editor plugin. Give me a hint and I'll figure out how to solve this with my setup.
Thanks a lot for your help!
I've written an extension to the YUI editor to handle this, you can download it here:
http://antscode.blogspot.com/2009/05/strip-formatting-on-paste-using-yui.html
As far as I know there is no such function in the YUI editor. Finally I parsed the editor content on submit as described on this question.