I was wondering how online rich text editors maintain the formatting when you paste text from a webpage or document. A standard textarea box only takes text while these WYSIWYG editors seem to use a DIV. How does it work?
Online rich text editors use contentEditable or designMode to take advantage of the browser's native support for HTML editing. When you paste into a contentEditable or designMode element, the browser puts HTML directely into the element. Try it yourself by pasting into Midas Demo and then using Firebug's inspect element to look at the HTML you pasted.
JavaScript applications can use the execCommand method to format the user's selection in a rich text editor.
WYSIWYG Editors actually build on top of basic HTML Editing functionality that the browsers already have built in. In Firefox, the technology is called Midas. In IE, contentEditable.
By using existing browser capabilities (IE - ContentEditable). This allows the developer to let the user edit html directly. They usually use an iFrame to separate the editable section from the rest of the page, but this is not required.
Then the developer can simply read the html source of the iframe (or whatever) and they're done.
Related
Parent doc uses MathJax to display mathematics. To display the maths in Rich text editors which uses iframe, could any one suggest a good and simple approach? I am now left with the following
a. to load the MathJax again in iframe.
Since the browser caches the js and css, this may not create additional overhead.
b. get all the scripts and css using js and reattach to the editor
c. or use rich text editor which uses div instead iframe.
All I know is that it uses a IFRAME tag as it's presentation layer, how does it store the data, how does it switch between WYSIWYG mode and source mode?
Most in-browser WYSIWYG editors (Google Docs is a notable exception) use the contenteditable attribute to make an element editable.
The data doesn't need to be stored in any special way, it's just the HTML content of the editable node.
Switch to source mode by dumping the innerHTML of your editable element into a textarea, showing the textarea, and hiding the editable element.
You can find lots of information and tutorials by googling contenteditable.
I'd use one of the many free ones:
http://akzhan.github.com/jwysiwyg/
example: http://akzhan.github.com/jwysiwyg/help/examples/03-ajax.html
At the moment I'm using the wysiwyg module for Drupal with tiny_mce. However, it keeps inserting all kinds of superfluous spans and other trash elements in my markup. I want to use wysiwyg mostly for semantic markup with css classes, any inline styles are a problem, because I have to clean up my html by hand - sort of defies the purpose of having a wysiwyg editor altogether. What other wysiwyg editor should I try, which will behave more sensibly?
WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.
BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.
In my experience ck editor is a very good solution.
The only problem i have seen it have is drop a instead of leaving a box blank
It has paste plain text and paste from word features that prevent extra markup from being dropped in
When working with a cms i think what is important usually is not how well you can enter markup, as a developer you can usually just use a text area and drop html, but how the editors will enter content.
Ck editor usually produces very clean results, as long as direct pasting from Word does not take place
As people have helped me out in the comments, there are two ways to integrate it with Drupal
WYSIWYG API module, and standalone module cKEditor
I really wanted to go with CKEditor myself but after trying to get rid of that adding breaks and spaces everywhere stuff I had to revert to plain text input.
I am currently considering markitup!, which you may want to investigate as well.
I am hopeful as I have good experiences with it on WP but I didn't get to try it on Drupal just yet.
I would suggest BUEditor, you can configure all buttons and thus control the output
Unfortunately I have yet to find an editor that doesn't try to mess with your code in one way or another. In Drupal, I've tried TinyMCE, FCKEditor, and CKEditor. In non-Drupal projects I've used Ephox EditLive and the YUI 2 Rich Text Editor. All of them try to "fix" or autoformat your code in one way or another, and to that end they are all frustrating. Of that group, Ephox EditLive is the worst offender, and ironically it's the only one that isn't free.
I've resigned myself to plain text editing in Drupal whenever there's a slight chance I may need to control the underlying HTML. My WYSIWYG editor is off by default; I whitelist pages in as needed. It's tedious, but for me it's better than playing tug-of-war with the WYSIWYG for control.
Can I get an explanation on how to make a wysiwyg editor using a textarea? All I need it to be able to do is parse basic html tags like bold, italics, underline, etc. It doesn't need to have any buttons that inserts it, I just want to have a default text inside the textarea tags that parse the html.
Example:
<textarea cols="20" rows="20" name="ok">
<b>wat</b>
</textarea>
This will print out <b>wat</b> instead of wat inside the textarea.
Edit: jQuery is preferred
Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...
document.getElementById('something').contentEditable = true;
Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.
A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)
The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.
A textarea will not parse HTML, but by using a WYSIWYG plugin, an editor will replace the textarea and give the user the ability to view and modify the content. With some editors, such as TinyMCE, you are able to set it to Simple mode, and allow only the basics of formatting (bold, italic, underline, bullets, etc) like you are interested in. This helps keeps the editor from being cluttered with unnecessary tools.
I suggest checking out TinyMCE or CKEditor
I have a TinyMCE widget that is limited to only <p> tags and non-block-level elements. Thus, the user is unable to insert tags like <div> or <table>. Which is the desired behavior.
However, the user can copy any content from any web page and paste it to TinyMCE. Is there a way to prevent pasting there, or better yet, limit paste to only a set of tags?
Have a look at the paste plugin shipped with TinyMCE.
I know that in Drupal, if you use TinyMCE provided in the wysywig module, you get the choice of allowing filtered html, full html, or php code inputted into the editor.