I want to know the basic principle used for WYSIWYG pages on the web. I started coding it and made it using a text area, but very soon I realized that I cannot add or show images or any HTML in the text area. So I made it using DIV, but I did not understand how I could make it editable.
So, in gist, I want to know how(in principle) to make an editable DIV section on a web page, something similar to Google docs or FCKEditor or TinyMCE.
I would be very grateful for any pointers and info.
Thanks!
There's the contentEditable flag that can be added to any element on a page to make it editable, eg.
<div contentEditable>I am editable!!!!</div>
Should work in all major browsers nowadays, and things like shortcuts keys (cmd/ctrl-b, etc) will Just Work.
Form submission can then be done by pulling innerHTML out of the editable region.
What you see is what you mean is the way - don't follow the WYSIWYG path as it is full of traps.
WYMeditor is the best when it comes to outputting semantic and clean HTML.
TinyMCE is open-source, so you could take a look at how it works under the hood. :)
It appears from the installation directions that an HTML form section (to allow submitting the form to the server for storage) is made with a textarea inside which gets replaced with the TineMCE editor.
The source itself is referenced from the tiny_mce.js file that is referenced in the target HTML file, so that might be a good starting point to see how it works.
Good luck!
Edit:
Although I didn't spend a lot of time, looking at the source for TinyMCE seems to indicate that the editor itself is inside of an iframe, so that may explain how the images can be displayed in an "editable" area.
If you're curious, download the development package, and take a look at the tiny_mce/jscripts/tiny_mce/classes/Editor.js. From around line 400, it appears that they're setting up an iframe and adding it to the DOM of the target HTML.
Use TinyMCE and turn off the toolbars.
Seriously, making a WYSIWYG editor for the web is a lot more complicated than it sounds and there are a million ways you can go wrong. You could spend the next two months battling with different browsers and stuff that breaks for no good reason, or you can trust the people who know more about the subject than you or I do.
TinyMCE is impressively configurable, and you can hide all the toolbars just by using the simplest configuration options:
tinyMCE.init({
mode: 'textareas',
theme: 'advanced',
theme_advanced_buttons1 : '',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_statusbar_location : "none",
});
You can also use normal CSS to make the
.mceLayout {
background: none !important;
border: none !important;
}
I'm not sure what you want the WYSIWYG area for, but chances are you'll need to get the contents at some point. You can do this with simple Javascript:
var editor = tinyMCE.get('editorid');
var stuff = editor.getContent();
It's free, easy to use, and proven reliable by lots of users. There's no good reason to reinvent the wheel.
Related
It's really hard to understand how Tinymce can be considered as WYSIWYG, because I cannot get what I see (visually exactly). So it is more likely "what you see is just what you see".
Currently I use getContent() to get the HTML. But it lacks embedded style and if we show that output html in some container, the visual rendering will look different.
I've tried implementing my own solution to help embed the current style (based on getComputedStyle) to each element. But that's not very efficient (many redundant styles can be included) and not always works (such as for embedded video, I'm not so sure why the <video> is not kept with getContent() and all <video>s disappear in the final output html).
The Tinymce team has done a lot of works, but really not sure why they did not even think about this feature? We need the exact HTML that renders what you see in the editor. We can sanitize the HTML after that by ourselves.
Here is a demo helping you imagine better what's so bothersome with this WYSISWYG editor:
https://jsfiddle.net/L83u5v0n/1/
Clicking on the Show HTML button shows this:
So you can clearly see it's just more likely to be WYSIWYS rather than WYSIWYG. Is there a solution to get the exact output HTML based on some hidden feature of Tinymce that I've not known of? If it's based on some custom script using getComputedStyle then really I do not need it (actually my solution is fairly good).
This is a function of demos that are set up to look good in the editor versus real world usage. The intention of the content_css configuration is to provide the CSS that will be used to render the content.
If you apply the content CSS elements to the page then "Show HTML" works perfectly.
https://jsfiddle.net/xzh8utbp/
Alternatively, delete the content_css configuration (but that won't quite work in your example because JSFiddle adds CSS to the result window).
Note that I've added mce-content-body to the view div because it turns out our codepen demo CSS leverages it. Normally that wouldn't be required, but then I don't think normal integrations use our codepen CSS.
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'm a little curious about how the editing of Google Docs works. How did they implement an editor within the DOM? It does not really looks like a form with a textarea, but rather a normal document body with an additional cursor. I guess it is some javascript technique behind.
Is there any free library that I can use for achieving this kind of functionality, or how can I implement it myself?
2019 Update
I'm pretty certain the answer below was accurate at time of writing in 2010 but has been substantially inaccurate for several years. Here's an answer of mine to a similar question in 2012 that may be more accurate, although still possibly not massively helpful.
How does Google Docs achieve content editing?
Original answer
It uses editing functionality built into all modern desktop browsers, accessed at document level via setting the designMode property of the document to "on", or at an element level by adding a contenteditable attribute with value "true" (also triggered by setting the contentEditable property of an element to the string "true").
A very common strategy for editing a piece of content in a web page is to include an iframe whose document has designMode turned on.
Coupled with this is document.execCommand, which in an editable document can be used to apply various kinds of formatting. For example:
document.execCommand("bold", false, null);
... will toggle whether the selected text is bold. There is a pool of common commands between browsers but there are some discrepancies as to exactly how some are implemented. More info can be found here at MSDN for IE and here at MDC for Firefox. Can't seem to find documentation for WebKit.
Since mid-2010 Google Docs seems to completely having switched away from relying on the browser for editing mode.
Instead they built their own text/HTML editor using JavaScript and DOM.
They explain it in a lengthy blog posting on how they implemented the functions.
Having searched for 3rd-party vendors offering similar concepts, I found no one so far. Would have been a great for iOS since they seem to not support the contentEditable attribute until iOS 5 (and even then, there are issues)
For mee it looks like any HTML editor. They just coded their own JavaScript HTML editor. Even the HTML edit view doesn't have any magic.
A good and free HTML editor is TinyMCE but there are many others out there, even some very powerfull proprietary like CuteEditor which is available for PHP and ASP.NET.
BTW: The content of the document (in Google Docs) is placed in an iframe, just as it is in CuteEditor (and probably also in TinyMCE).
As other people have said, google is very uptight about what information they share. However, they have posted a lengthy blog idea about how they built their own word processing system FROM SCRATCH. Building this, would require you to have your own experience team with several days needed to complete it.
Link to lengthy blog is here:
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html
Essentially, they capture where your cursor is, place a div that looks like a line, and manually insert a letter at the place your cursor is
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.