I have a page where I add textareas to the DOM with javascript and I would like them to have a TinyMCE editor attached.
When I add the first textarea everything is fine.The problems occurs with the next ones added.
It looks something like this:
http://dl.dropbox.com/u/1918752/tinymce_problem.png
In the firebug console, there's an "d is undefined" error thrown.
I'm using
tinyMCE.execCommand("mceAddControl", false, 'textarea_id');
to add TinyMCE control to the newly inserted textarea.
I'm using TinyMCE version 3.0.1 and unfortunately upgrading isn't really an option now.
Later edit:
The function I use to insert textareas:
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g");
var reg = new RegExp("child_", "g");
$(link).up().previous('ul').insert(content.replace(regexp, new_id).replace(reg, "child_"+new_id));
if($('estore_products_category_children_attributes_'+new_id+'_description')) {
tinyMCE.execCommand("mceAddControl", false, 'estore_products_category_children_attributes_'+new_id+'_description');
}
}
The content parameter is where the textarea is.
This is used in a rails application, and I created a helper which returns a standard chunk of html based on the types of associations used, and then I replace the generic ID's with new unique ones and insert in into the DOM.
I think you did not shut down tinymce correctly in order to recreat an edito instance with the same id!
To shut down an editor instance correctly use:
tinyMCE.execCommand("mceRemoveControl", false, 'textarea_id');
This is necessary when you move the editor around inside the dom or when you remove parts of the dom containing the editor iframe.
Related
i use jodit in my website and wonder, how the content of an existing jodit editor can be updated within a function.
first i do....
$( document ).ready(function() {
var editor_adressblock = new Jodit('#adressblock', {
fullsize: false
});
});
and the editor is correctly created.
I have a function, which can be executed by the user and then should load content (via json-request) and then put the content into the existing jodit textarea.
Here is my try (for this example i have simplified the function) :
function takeover_adressblock(kunde_id, kunden_adresse_id) {
// get data by ajax.... not shown in this example
var data_by_ajax="test";
editor_adressblock.value=data_by_ajax; // this fails....
}
Means, i don't know how i can send data to the existing jodit texteditor...
I am a jquery beginner, so please don't be too hard ;-)
Best regards
Daniel
Per the documentation you seem to have the right format, so it would help to see the code for the ajax request you're making in case the issue is there.
Otherwise, I would suggest initializing the editor without jQuery in case it's a reference or scoping issue:
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
I am trying to use javascript to add text input to a tinyMCE editor,
I can append the text visually using :
tinymce.activeEditor.selection.setContent(' words and stuff ');
have also tried
tinyMCE.activeEditor.selection.setContent(' ');
Which will allow me to see the text specified above no problem, however when i go to save its almost as if the javascript didnt actually append the text where it should have or something, my save is the original text without the text appended above, does anyone have any idea why?
The issue i was having was, I would add text into tinymce with the javascript line
function AddNotes(NoteS) {
tinymce.activeEditor.execCommand('mceInsertContent', false ,NoteS);
}
And for some reason, I needed to insert into the tinymce TWO TIMES for it to work.
So what I did to compensate was added the information that I want to add, and then I throw in a paragraph element which creates a new line under what I just added. I could have added a space, or whatever I want but I chose to add a new line as seen below:
function AddNotes(NoteS) {
tinymce.activeEditor.execCommand('mceInsertContent', false, NoteS);
tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<p></p>');
}
I'm trying to set the value of a textfield using the following code:
if (ie.TextField(Find.ById("testField")).Exists)
ie.TextField(Find.ById("testField")).Value = "Test";
The code passes without raising an error, however the textfield is not filled with the value.
I get an exception when I execute the following line:
ie.TextField(Find.ById("testField")).Focus()
The textarea is a tiny_mce editor and one of the html attributes is: style="display: none;"...
Any ideas how I can modify the value of such a field using Watin?
Thanks.
First tinymce is not a textarea. tinymce hides your textarea on initialization and creates a contenteditable iframe which is then used to allow text editing, styling aso...
Second if you want to write the editors content back to the hidden textarea you may do this using
tinymce.get('testField').triggerSave();.
Another way to set the value of your textarea is:
tinymce.get('testField').getDocumentById('testField').value = 'new value';
In case you want to write content directly to your tinymce editor you may choose on of the following
tinymce.get('testField').setContent('my_new_content'); // replaces the editors content
or
tinymce.get('testField').execCommand('mceInsertContent',false, 'my_content_to_be_added'); // adds the content at the carat postion
Here is a simple way to handle this using the Watin Eval function:
var js = "tinyMCE.get('body').setContent('" + bodyCont + "')";
var s = ie.Eval(js);
'body' needs to replaced with the id of the textarea that is hidden by tinymce - do a "view source" in your browser window to find this id.
As I have an editor-list, that needs to have additional edit lines, I found this solution for the problem:
Mvc list editor by Stevens Anderson
this works perfectly, excepts that every time when I add a new line, the whole Form is set back to the default values. You can see the behavior in the demo of the linked page.
Try to edit the value of an input box and then add a new line without saving.
Why isn't it possible just to add a new editor line, without changing any data.
Ok, I've found a workaround
Instead of using the Html.AjaxLink I am now using a custom JavaScript function with jQuery
function newProjectExpenseRow() {
jQuery.get("/Controller/Action", function (response) {
$(response).insertBefore("#id");
});
}
it now gets the Control from the controller/action and inserts the result before the #id element
So I have a TinyMCE form on my page and it is pre-filled with "sections" (divs with specific class names).
I have a couple of plugins that will add to TinyMCE with more "sections".
I need it so when I push the plugin button it will test to make sure the cursor is not inside a "section" and paste a "section" inside another "section".
Not sure the direction I need to take to accomplish this. Any help would be great.
more info:
So below is an example of a plugin that adds a button that just inserts a simple dov into the editor at the selection/cursor.
ed.addButton('pluginbutton', {
title : 'MyPlugin',
image : 'img/test.png',
onclick : function() {
ed.selection.setContent('<div>test</div>');
}
});
I am currently thinking that onBeforeSetContent is the API event handler I need to set to process whether or not I am in another section and if so send a message to the screen. If not just do the setContent method. I am not sure exactly how to set that up though so I am still figuring that out. Any help here?
Since it seems like you have control over the plugin, here is how I would edit it to work.
Note: I am using the jQuery method closest. I figured since you are on the jQuery core team, you are probably using it for this project. If not, just refactor that line as needed. The important part is that selection.getNode() returns the DOM element that is the parent of both the start and end selection points.:
ed.addButton('pluginbutton', {
title : 'MyPlugin',
image : 'img/test.png',
onclick : function() {
if( !$(ed.selection.getNode()).closest('div.section').length ){
ed.selection.setContent('<div class="section">test</div>');
}
}
});
Additional thoughts
Also, to make your plugin aware enough so it won't put a div as the child of a p tag, you could do something like this:
Replace onclick above with this:
onclick: function(){
var $node = $(ed.selection.getNode());
if( !$node.closest('div.section').length ){
// Get highest element that is a direct child of the `body` tag:
var $parent = $node.closest('body > *');
// Wrap with our special section div
if($parent.length) $parent.wrap('<div class="section"></div>');
}
}
I don't know TinyMCE specifically, but it should be possible to extract the current DOM element from ed.selection. If that is possible (I'm sure it is using some sort of getter function or property), you should be able to do the following:
Mark a "forbidden" area using an id or class ("<div class='protected'> ")
traverse through the selection's ancestry (using the parentNode property of the element) and check whether one of the parent elements has the "protected" class or ID.
If the ID was found, do not execute setContent(); otherwise execute it.