My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
Rich HTML editing in the browser: Part 2
This concluding article builds upon the theory and other groundwork laid in the first part of the article series (http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/), to show how to actually build a rich content editor that works across the major browsers.( Read the article )
6. January 2009, 15:35:33 (edited)
Might I ask why the source code contains "var self = this;"? in TogglCommandController and ValueSelectorController? It seems like they serve no purpose.
And for anyone interested in working with a contentEditable version, you just need to turn #editFrame from an iframe to a div, and then make the following changes in the middle of editor.js:
Also, you should change "editWindow.focus();" to "editFrame.focus();" (at least for the contentEditable version).
I must say... this editor is very good. Easiest one to work with and extend/modify for contentEditable. EVERY major editor I can find just uses an iframe, which this article did too, but this one is the only one that it was simple to convert. Remarkably, it doesn't suffer from issues I've encountered with my own editor with contentEditable in Firefox 3 (execCommand occasionally does *nothing*). I don't know why, and I'm jealous. :-p
And for anyone interested in working with a contentEditable version, you just need to turn #editFrame from an iframe to a div, and then make the following changes in the middle of editor.js:
var editFrame = document.getElementById("editFrame");
editFrame.contentEditable = true;
var editWindow = window;
var editDoc = document;
Also, you should change "editWindow.focus();" to "editFrame.focus();" (at least for the contentEditable version).
I must say... this editor is very good. Easiest one to work with and extend/modify for contentEditable. EVERY major editor I can find just uses an iframe, which this article did too, but this one is the only one that it was simple to convert. Remarkably, it doesn't suffer from issues I've encountered with my own editor with contentEditable in Firefox 3 (execCommand occasionally does *nothing*). I don't know why, and I'm jealous. :-p
Fantastic article. Really, the best I've seen. I look forward to part three.
Perhaps you should have links to the different parts of the article from each page?
I've created a Mootools powered editor based on this tutorial,
<a href="http://www.mooforum.net/scripts12/mooinline-textbox-rte-inline-wysiwyg-editor-t1168.html">MooInline Editor</a>. (<a href="http://www.siteroller.net/dev/mootools/mooinline">RTE demo</a>) (I'm open for comments from the master.)
@POWRSURG: probably because you are losing focus of the button.
In IE make sure you set unselectable to 'on'.
Perhaps you should have links to the different parts of the article from each page?
I've created a Mootools powered editor based on this tutorial,
<a href="http://www.mooforum.net/scripts12/mooinline-textbox-rte-inline-wysiwyg-editor-t1168.html">MooInline Editor</a>. (<a href="http://www.siteroller.net/dev/mootools/mooinline">RTE demo</a>) (I'm open for comments from the master.)
@POWRSURG: probably because you are losing focus of the button.
In IE make sure you set unselectable to 'on'.
Getting around here this long after (one year after the most recent activity), I hope I can still get attention on this topic...
This was a great tutorial for starters like me, just what I've been looking for in several places before now.
I have a QUESTION:
How would I now implement this with a FORM to save the edited text in a DATABASE, bearing in mind an application such as a FORUM?
Thanks anyone for helping out.
This was a great tutorial for starters like me, just what I've been looking for in several places before now.
I have a QUESTION:
How would I now implement this with a FORM to save the edited text in a DATABASE, bearing in mind an application such as a FORUM?
Thanks anyone for helping out.
The big problem I have with rich text editing at the moment is how to deal with pastes when someone cuts from a application like word. You have HUGE amounts of junk that should be stripped out on paste - but I cant find good methods to do it.
You can pick up the paste itself with onPaste (which sensibly lets you detect the clipboard content only when the user pastes something specifically into your box). But I cant find examples that implement this with a rich text box....has anyone pulled this off?
I guess you need to add some detection code into the subframe, then call functions in the parent? hmz.
You can pick up the paste itself with onPaste (which sensibly lets you detect the clipboard content only when the user pastes something specifically into your box). But I cant find examples that implement this with a rich text box....has anyone pulled this off?
I guess you need to add some detection code into the subframe, then call functions in the parent? hmz.