Menu
i'm trying to weigh the pros and cons of using a <div> vs. <iframe> in making my own rich text/wysiwyg editor.
In doing so, why can't I just use a contenteditable <div> and why do so many people prefer the <iframe> ?
Background discussion: A common way to go about making a wysiwyg editor as I understand is to make a div or iframe contenteditable and to then to do execCommand on the document containing the div or the iframe body to make its text bold or whatever.
Here's the HTML:
<html><!--parent doc--> <body><button type="button" class="btn-bold">Bold</button> <div contenteditable="true"></div> </body> </html> vs.:
<html><!--parent doc--> <body><button type="button" class="btn-bold">Bold</button> <iframe> <body contenteditable="true"></body> </iframe> </body> </html> and the JS:
$(document.body).on('click', '.btn-bold', function(){ document.execCommand('bold', false, null); }); vs.:
$(document.body).on('click', '.btn-bold', function(){ window.frames[0].document.body.execCommand('bold', false, null); }); It looks like most well-made rich-text editors use an iframe. While I can easily get this contenteditable /execCommand combo to work on a div/iframe in Webkit browsers, I'm having a hellish time trying to get the iframe to work in Firefox. I'm having to resorting to loading scripts and stylesheets into the iframe and all sorts of nonsense to duplicate what I can easily accomplish with the div-based version. So the <div>-based method seems preferable. Any strong reasons I reconsider?
427
In the Content Type Builder page, add the Rich Text Editor (RTE) field to it. In the Edit Properties section of the RTE field, under Editor Version, select Latest. Under the Editor Type, select Custom, and choose the formatting options you want to include in the RTE field.
A rich text editor, also called a WYSIWYG HTML editor, shows how your web page will appear in a web browser. With a rich text editor, you can edit or add content, tables, links, images, and other web components on a webpage without writing a single line of code.
Just set contentEditable="false" . See this answer.
WYSIWYG is a content editing tool. In WYSIWYG editors the edited content whether text or graphics, appears in a form close to a final product. So instead of manually writing source code, you deal with a convenient rich text editor in which you manipulate design elements.
First of all... Don't try to make your own WYSIWYG editor if you're thinking about commercial use. It's a cool idea for a personal project, because you can learn a lot, but it will take you years to create editor that you will be able to sell to someone that cares about if it really works, not just looks. I've seen recently some really cool looking new editors, but they really doesn't work. Really. And that's not because their developers suck - it's because browsers suck.
OK, that was a great intro, now some facts:
Now the answer - in addition to what Tim Down wrote here building a wysiwyg editor you can read what I wrote under this question HTML WYSIWYG edtor: why is the editable content moved in an iFrame
Basically, in an iframe you're safer, you've got entire document, content won't leak out of your editable element, you can use styles, etc. There are also few drawback of the iframe approach - it's heavier, bootstrap code is... really tricky, you can't inherit styles of the website to which editor is attached, I guess that managing focus may be more difficult in this case and you have to pay attention in which document you're creating new elements (relevant only in IE<8).
And remember - don't write your own editor unless you're prepared for problems like this Paste as plain text Contenteditable div & textarea (word/excel...) :D
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
