I want realize a "live" editing. When you editing content in ckeditor, the same content appear in other place (like div, p, etc.) in same time.
Other interesting question: when I removed display:none and visibility:hidden from text area, which attach to ckeditor, I saw, that it's empty. But if I try to get value of textarea ($('#text_editor').val()) there are content from ckeditor. What is the magic?
One of the developers of ckeditor has developed an onchange plugin.
Related
I want to understand how tinymce functions.
the rich text editor contains an html document within an iframe. how are the nested DOM elements inside editable, In other word how am I able to type inside a <div> or a <p> layer when there is no textarea or input field involved (at least I dont see any)?
are the elements converted to input fields when they are active?
edit: If your going to vote down the question, please state why.
In tinyMCE's case (and most other editors) it's an <iframe> (as to not inherit styling from the parent page, among other reasons), but the magic is the contentEditable attribute being set to true.
You can read more detail in the working draft of HTML5 here.
You can test a very simplified demo here, the editors do much more of course with their toolbars, a backing <textarea> to store the markup for server-submission, etc...but your question seems to be how are you editing the elements, the core of that is contenteditable.
I am developing a simple tool for sending emails.
I am using CKEditor for my textarea formatting.
I want a scenario, whereby by default whereby the formatting buttons do not show till the user clicks on "Show Formatting buttons"
How can I achieve this with CKEditor without using two textareas.
You can use this link as an example:
Create and destroy CKEditor instances on the fly
In the example they use a div, but you can just as easily use a standard textarea, and it will do the plain text / rich text tradeoff you are looking for.
I need to hide and show the editor based on event.
I initiate the editor. then, i try to hide using the code:
$('#textare').hide();
but it doesn't work, since it as I think initiate iframe
so how can I show and hide editor
Update: I'm sorry forget to add editor name.. I use wysihtml5.
I think the way that editor work is hide the textarea and make iframe
so the above text couldent hide the editor.
The textarea should already be hidden since it will only be used as a fallback. The editor itself is contained in an iframe with class wysihtml5-sandbox. So this should toggle the editor
$(".wysihtml5-sandbox").hide()
I have a text area and when the user clicks a button say something like insert an image button the user selects the image to be uploaded and then i would like to add this image to the text area and the user can continue editing the text area, just like what orkut does. How do we achieve such functionality?
You can't display an image directly inside a textarea control.
The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.
Perhaps a writable div (content editable) would suit your purposes better.
I don't believe this is possible. You should look into using a content editable div.
I don't think Orkut actually does what you are talking about either. Looks like they are doing the same thing that stackoverflow does - using a wysiwyg editor, albeit a nicely dressed up or homegrown version. TinyMCE and FCKeditor are the two I'm most familiar with. There are a few leads on this page too: html editor alternative besides tinyMCE
Would I be shooting myself in the foot by using a div with attribute contentEditable="true" as a text field rather than a textarea?
It would work fine, but it'd be a little bit more difficult than a form, simply because you're going to have to wire up your own logic to make the button's click event track down the correct div, get its content, and then perform the submission. The advantage of a textarea is that the browser takes care of all that for you.
It's not the same thing. First semantically, the purpose of a textarea is to write/edit plain text whereas with contentEditable you can edit list for instance (see: htmldemo)
Second the behavior is also different. For example, in chrome when you test the link below and that you delete all the content you loose the focus (the div element disappear) which is not the expected behavior, or if it is it's idiot.
The Gmail's mail edit box is also a div with contenteditable="true". The major benefit is it has auto-adjust height as user input text/content. Also it supports rich text inside. You can mimic the Textarea by setting a max height if need.
On the other hand if you want auto height in Textarea, you might have to use js to bind some listener to the oninput hook.
In divs with contenteditable="true" the content can be html formatted, e.g. text with different colors.
See also https://stackoverflow.com/a/40898337/11769765.