I need a reference for the element which i have inserted in TinyMCE editor through
ed.execCommand('mceInsertContent', false, '<span class="marker">my_node_content</span>')
OR, Is there any workaround to insert element at cursor index other than execCommand in TinyMCE editor?
So that, I can retain the reference to inserted element.
Related
I have an HTML where inline element span which hold block element example div. I have pasted below HTML source in the source view of TinyMCE and press Ok
<span>plain text<div>test div</div></span>
Further, I have click on the source view and HTML it changes to the below HTML where span automatically gets closed and new span added to the HTML,
<p><span><span>plain text</span></span></p>
<div>test div</div>
<p></p>
I know, we can't have block element inside the inline element(i.e. HTML global rule), but I am not in position to make changes in the current system.
Update: I have tried to solution mention here but not worked well: https://stackoverflow.com/a/14603631/4420468
There is a config option to control this behavior.
valid_children
The valid_children enables you to control what child elements can exists within specified parent elements.
see docs for further information
I use TinyMCE 4.1.10 and have a problem with tags inside <a>-tags:
I need to insert code in the following markup inside the code viewer:
<a><h3>something</h3></a>
Generally I want every tag to be possible inside the <a>-tag (besides another <a>-tag).
But TinyMCE does a ridiculous cleanup:
<p><a></a></p>
<h3><a>something</a></h3>
<p></p>
I've already made following modifications in the setup:
extended_valid_elements : "a[*]",//allow empty <a>-tag
valid_children : "+a[div|h1|h2|h3|h4|h5|h6|p|#text]",//allow some children in the <a>-tag
verify_html: false,
It doesn't make any sense at all what TinyMCE is doing here.
The TinyMCE-website is telling me it uses html5-specification by default:
The schema option enables you to switch between the HTML4 and HTML5
schema. This controls the valid elements and attributes that can be
placed in the HTML. This value can either be the default html5, html4
or html5-strict.
And in the HTML5-Specifiations you can read:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
And now I don't get anything despite HTML5 valid markup AND extra valid-children setting in TinyMCE.
In the CKEditor plugin I'm writing, i need to create a new empty paragraph.
I know that empty paragraphs (<p></p>) are collapsed by most browsers, that is why CKEditor has some special handling for them:
When displaying the HTML source, CKEditor displays <p> </p> for an empty paragraph (for example, when you press enter twice)
Depending on the browser, in the editing area CKEditor fills the Paragraph with another placeholder. For example in Mozilla Firefox, it inserts a <br type="_moz" /> into the paragraph.
However, when inserting a p DOM node manually (using the CKEditor dom object), this special handling is omitted. It magically appears when i switch to source view and back edit mode, though.
I've tried:
var new_p = new CKEDITOR.dom.element('p');
editor.insertElement(new_p);
And:
var new_p = new CKEDITOR.dom.element.createFromHtml('<p></p>');
editor.insertElement(new_p);
And also:
editor.insertHtml('<p>');
But the special handling of the empty paragraph does not take place. I get an empty Paragraph, but as the Browser is collapsing it, I can't see or edit its content correctly.
When switching back and forth to the source code view, CKEditor detects the empty paragraph and inserts the filler. Also when submitting the data. But i need the filler to appear immediately when inserting the new node.
How do i get CKEditor to handle my new paragraph like any other empty paragraph it would create when a user hits Enter twice?
I know i could also insert manually as HTML content to the new DOM node, but thats a huge difference - because in this case, the space really appears in the editing area, so when a user enters content into the new paragraph, he must delete the non-breaking space manually.
After researching how CKEditor handles the press of [ENTER] internally, i came to this solution:
var new_node = new CKEDITOR.dom.element( 'p' );
// insert UTF-16 non-breaking space
var dummy = editor.document.createText( '\u00A0' );
dummy.appendTo( new_node );
editor.insertElement(new_node);
// move cursor to beginning of new element
var range = editor.createRange();
range.moveToPosition( new_node, CKEDITOR.POSITION_AFTER_START );
editor.getSelection().selectRanges( [ range ] );
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.
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.