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
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.
I'm using Ace Editor to create a simple WYSIWYG editor for a client.
I've seen divshot.com has a WYSIWYG editor that also uses Ace, but I can't figure out how they select elements on the page. They also are able to properly select elements in their code view and it properly selects items in the page view.
setting content in Ace editor is pretty basic
editor.setValue('some text content');
so how can i make the elements in my wysiwyg view bound to Ace editor?
btw I'm using Angular as well and my WYSIWYG content view is an iframe.
It's very, very difficult (I'm a cofounder of Divshot).
We wrote a proprietary component recognition engine that allows for two-way syncing between an ACE Editor instance and a rendered HTML canvas. It involves lots and lots of DOM traversal, selector recognition, source cleaning, and ACE hacking.
You can look at the session for the editor and grab the current text that way.
rte.editor.getSession().on('change', function(e) {
var text = rte.editor.getSession().getValue();
$('#output').html(text);
});
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.
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.