How to implement a Rich Text Editor in HTML? - javascript

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.

Related

Using rangy with Kendo Editor

I'm trying to make a twitter-like rich-text editor wherein the characters that go over the character limit are highlighted. I saw this question and tried editing it.
I used Kendo UI's Editor and also Tim Down's rangy library. Using Kendo's inline editor, the rangy library works great.
<div contenteditable="true" class="rte"></div>
Although I need it to work when attached to a textarea.
<textarea class="rte" maxlength="50"></textarea>
The rangy library doesn't work on the textarea quite like the inline editor maybe because Kendo uses an iframe for this. The characters that go over the limit are highlighted but the cursor goes back to the start of the content.
Does anyone know how to fix this? Here's a sample I've been working on: http://jsfiddle.net/G4jn7/12/
This is easily fixed: you just need to pass in editor into the rangy.getSelection() call to tell it to get the selection from the iframe's rather than the main document.
Demo: http://jsfiddle.net/G4jn7/13/
In rangy.getSelection(x), x can be any of several things to identify the document to use: a Window, Document, an <iframe> element or a non-iframe element within the document.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

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

HTML code inside controls: ComboBox, TextArea

I'm looking for a way to display full HTML in the components (like ComboBox - Select, TextArea) on a web page. Is it somehow possible to do with the native HTML controls, ex. extending them? Are there any extensions that would be useful for me?
Thanks,
Rafal
Take a look at how CKEditor renders it's view on the client - it's effectively an Rich Text Editor for browsers (there's lots of other alternatives, too):
http://ckeditor.com/demo
http://www.kevinroth.com/rte/demo.htm
http://developer.yahoo.com/yui/examples/editor/index.html
Looking at the construction of these with the IE Developer Toolbar, Firebug etc is a real learning experience.
An approach many people take is to embed their text area in a div, and also have a another div that's hidden. Underneath, are tabs, for example, Editor, Preview. Clicking on preview takes the HTML in the text box and does something like previewDiv.innerHTML = textbox.value;
I'm not sure if this is the kind of thing you want, but an example of this is here:
http://www.freetextbox.com/demos/
Hope this helps.

JavaScript WYSIWYG implementation

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

How does Google mail achieve rtf in textarea?

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.

Categories