I have a grid and div with tinyMCE (textarea) in it on my page.
Div is initially hidden. After populating textarea:
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
InitMCE();
Content in tinyMCE appears and component is editable but, after hidding div with textarea (#divCard), populating again $('#editor').val(data.Content);
tinyMCE appears readonly and content is not shown.
in function InitMCE() is code:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
...
});
I tried with
tinyMCE.execCommand("mceRemoveControl", false, '#editor');
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
InitMCE();
and with:
tinyMCE.remove($('textarea'));
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
tinyMCE.execCommand("mceAddControl", false, '#editor');
InitMCE();
and some other variations but no success.
Why are you hiding the textarea.
If you inspect the html DOM struture after TinyMCE is initialized, you will see that TinyMCE uses div and span infront of textarea to render your text, but when you try to edit it, you are actually editing the textarea.
So if you hide your textarea, you won't be able to edit it anymore.
There are several problem that may arise when the source html element (in your case a textarea) is hidden on editor initialization.
Tinymce will take care of hiding the former textarea.
The solution to your problem will be to set the textarea visible just before initialization - then you will have no problem editing its contents afterwards.
Related
I have a single HTML page app, that contains a text input bound to a jQuery datepicker. It is initialised/bound on startup, and it functions just fine.
The page has an inner container DIV, beneath the datepicker text input field, on the same page.
I am inlcuding an image, because I need to obscure some info:
When I dynamically insert a popup FORM into this inner container, it becomes visible, centered, floating over the container DIV.
<div id="CLC_Form">...</div>
var e = document.getElementById("contentDIV");
e.innerHTML += clc_div;
However, it also destroys the datepicker, clearing out the selected date, and making the datepicker field dead/unbound and unresponsive when I remove the added FORM (when the user clicks "Save" button on the popup FORM).
var e = document.getElementById("CLC_Form");
e.parentElement.removeChild(e);
Any ideas? Please feel free to ask for additional info if I have not been thorough enough.
Thanks
Instead of using:
e.innerHTML += clc_div;
I used:
e.insertAdjacentHTML("beforeend", clc_div);
Problem solved.
I'm working on a contenteditable div and trying to create a text editor, but in this text editor I'm adding some elements like image and div. If I'm supposed to add and remove elements in editable div and then hit CtrlZ undo function is not working (not getting element back).
Please let me know is there any solution for this. Undo function is only working for text inside the contenteditable div. Thanks in advance.
You can use document.execCommand for undo and redo the changes in the editable div's. You can refer this document for more details execCommand
The problem is that after initialising codemirror plugin i cannot type to the editor if textatea in css is set as display:none;, these are the steps i follow:
a) create and append textarea element:
var txt = document.createElement('TEXTAREA');
document.body.appendChild(txt);
b) initialise codemirror plugin:
var html_edit = CodeMirror.fromTextArea(txt, {
mode: 'htmlmixed'
});
At that point if textarea is untouched in css i can type to the editor, however is i do this:
textarea {
display:none;
}
cursor is blinking in editor but i cannot type to the editor.
I am setting textarea to display:none in css because before codemirror scripts are downloaded and initialised user can see for second textarea element which doesnt look very good. However it creates above problem, maybe someone has dealt with similiar situation, how to solve it?
CodeMirror focuses a hidden textarea to handle user input. Your rule will match that element and set it to display none, which means it can not be focused, and thus, you can't focus your CodeMirror instance.
Use a more specific CSS selector, for example by adding a class to your textarea, to so that you only hide the textarea that you created.
I'm using TinyMCE 3.4.8 and there I noticed that if your cursor is in editor and then if you click on any plugin like insert image then it works fine. But if your cursor is not in textarea, means you click somewhere else in Tiny like the title bar or blank space outside textarea and then after that if you click on any plugin then you'll see the below error in IE console.
The code in Line 6209 is given below.
g.insertNode(m.create("span", {
"data-mce-type": "bookmark",
id: i + "_start",
style: u
}, l))
Now what I get from this is that when you click on any plugin it inserts a span tag for bookmarking purpose, but if the cursor was not in textarea then in that case inserting the node to undefined object causes the above error. I want to know how to solve this, so that even if user clicks outside then also the image gets inserted to last known cursor position.
I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering the following two problems when using execCommand to apply formatting, including font style and size, as well as bold, italic, and underline:
When all text in the div is selected, execCommand simply does not work. execCommand works fine when only part of the text is selected, but does nothing when all of the text is selected.
Applying formatting with no text selected yields unexpected results. For example, when calling execCommand('bold') with no text selected and then typing results in bold text being typed until a spacebar is inserted, at which point the bold formatting is lost (until another space is inserted, interestingly enough; then the text becomes bold again).
To see what I mean, please try running the following HTML code in Firefox 3:
<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>
Please try the following:
Select the word "Some" only. Click the Bold button. This will make the text bold, as expected.
Select the entire phrase "Some editable text" (either manually or using CTRL-A). Click the Bold button. Nothing happens. This demonstrates the first bug shown above.
Hit the backspace key to clear the div. Click the Bold button and begin typing. Type a few words with spaces. This will demonstrate the second bug.
Any ideas on what could be causing these problems and how to work around them would be greatly appreciated!
Interesting. In Firefox 3.6.3, I can't replicate the first problem: selecting all of the editable text and pressing the button toggles boldness as expected. However, the other two issues I do see. They'll be bugs in Mozilla's implementation of contenteditable.
Interestingly, the alternate-words-bold problem doesn't happen if you use designMode rather than contenteditable. I suspect it will solve your other problem too. This involves making the whole document editable, rather than just elements within it:
window.onload = function() {
document.designMode = "on";
};
If this isn't an option and you need the fine control that contenteditable provides, you'll need to implement your own version of the bold command using DOM manipulation and Ranges. This will be quite involved to get working in IE and non-IE browsers.