tiny mce strips content while posting - javascript

I'm using tiny mce in my project which was built using Kohana 3.0.7. If I try to add content to the editor and submit the form, the content is saved properly. But, if there is a validation error and the same page with the validation errors is displayed, there is some issue. After correcting the validation error and adding more content to the mce editor, when I try to post, only the content which was posted at the first attempt is posted. The content which I add after is lost.
I have confirmed this with a plain text-area and sure the editor is causing this. How can I fix this ?

Looks like your textarea content does not get updated after an error.
You may do this manually by calling tinymce.triggerSave(); in your javascript console (firebug or similar tool). triggerSave() orders all tinymce instances to write their content back to the html elment they had been created for.
Update: A javascript console is available using firebug or some other developertools (browser addons). What you need to have it functional all of the time is to use the setup init parameter and a handler: XXXX stands for the handler you will need (an event fired when you post)
setup: function(ed){
ed.onXXXX.add(function(ed, evt){
//console.log('paste');
tinymce.triggerSave();
});
},

Related

Setting tinyMCE text data using JavaScript

I am trying to set the innerText of the p tag located inside the tinyMCE body here using javaScript but cannot seem to reach the element.
Elements Tab of the Developer Tools.
It looks to me like there is a shadow DOM in the iframe. As when I am running the following in the console I get null as a result.
document.querySelector("#tinymce");
null
However if I switch in the console from "top" to "mce_6_ifr" I can now reach the wanted data:
Console Tab of the Developer Tools
I am unsure how to move forward regarding this.
Any help is much appreciated !
I think it will work
document.getElementById("mce_6_ifr").contentWindow.document.getElementsByTagName("p")[0].innerText
TinyMCE has APIs that allow you to load content into the editor so that you do not have to do manual traversal of the DOM.
Here is a fully working example: http://fiddle.tinymce.com/qigaab
The key code is inside the TinyMCE init:
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent('<p>This is content set via the init function</p>');
});
}
This code uses the setContent() API to load your HTML into the editor.
Manual DOM traversal will work but relies on the HTML that TinyMCE injects ... if that changes in some fashion your DOM-based code can break. Using the APIs ensures that you won't get breakage over time.
#Harold I can’t imagine why that would not work. Perhaps you can make a TinyMCE Fiddle that shows running code?

What should I do with tinyMCE when replacing sections of the DOM using ajaxSubmit?

On a multi-tab page, some tabs submit process changes the content of other tabs through an ajaxSubmit. If the other tab contains active tinyMCE edits what should I do to that tab before replacing it's content and what should I do (if anything) after the replacement?
Currently the code performs tinyMCE.execCommand("mceRemoveControl", true, ed_id); on all editors in the target tab and relies on the normal functionality of the system to bring them back after the change. Is that all that is necessary? I am experiencing obscure exceptions within the tinyMCE code after the change but it is difficult to discover the cause.
The error itself is SCRIPT5022: IndexSizeError - tiny_mce.js (1,78075) but I doubt that is specifically relevant.
TinyMCE v3.4.5
As i said in my Comments TinyMCE does not play well with AJAX there are loads of problems with it i have tried many times to get it to work.
In the end i switched to CKEditor so if you would like to try and use it you can here is the code you need for the ajaxSubmit() options
beforeSubmit:function{
for(var instanceName in CKEDITOR.instances) {
try{
CKEDITOR.instances[instanceName].destroy();
}catch(e){
}
}
}
the above code will remove CKEditor cleanly before you submit the following is how to re-inistialize CKEditor when your ajax has finished again this is a option for ajaxSubmit():
success:function(){
// do what you need to update your DOM and then final call is
$("editorSelector").ckeditor(options);
}

X-editable does not work after insertion

jQuery library: https://vitalets.github.io/x-editable/index.html
After inserting the HTML code into the block:
$.get(url, ->
return
).done((data)->
document.getElementById('js-block').innerHTML = data['result']
return
)
X-editable stops working.
The JS code above updates the contents of the div block.
After loading the page, clicking on the link opens the field. And the information was successfully updated.
But as soon as the contents of the block were updated with JS's help, the X-editable library stopped working (not initialized - apparently).
I found nothing in the documentation. The .enable() call did not help. The library developer says to go to stackoverflow.

Chrome Extension Paste into input element

Lets imagine I have a simple page. With the following content.
<form>
<input type="text" id="startText">
</form>
I have a chrome extension with an script that triggers on this page loading. I also have configured all the relevant permission in chrome (i.e. clipboardRead). The script that triggers on page load is called action.js. It currently has a single line of code:
document.getElementById("startText").value = "text";
I know that I can use the "execCommand('paste')" function to paste within a chrome extension. But I can't figure out how to modify the above code, so that it pastes the contents of the user's clipboard into the input element.
I would try something like:
document.getElementById("startText").value.execCommand('paste')
But that, unsurprisingly, does not work.
The clipboard can only be accessed via background pages, due to security reasons. The problem is that background pages cannot interact with the DOM, only content scripts can. Check out this gist, which solves this problem with messages passing between the background page and the content script.
As of 2014 and this bugfix, you can now use copy/paste directly in content_scripts, assuming you have declared the proper permissions in the manifest.
It's important to remember that execCommand('paste') does not return the contents of the clipboard, but actually triggers a paste action into the focused element and selection region of the document. Therefore, the code to paste into your input element would be:
document.getElementById("startText").select();
var didSucceed = document.execCommand('paste');
If you wish to capture formatted text, you will need to use a DIV contentEditable=true instead of a TEXTAREA.
If you would like to see a working example that uses the older method of using a background page, you can see my BBCodePaste extension.

tinymce 4 loading but showing tinymce.get is undefined

I'm working in a form update section using Tinymce and jquery and using ejs for load form including textarea and i call tinymce (tinymce init) using JavaScript function right after the ejs loaded.
The editor is working fine, but when i use
tinymce.get("content-text").setContent( $(".grid:first").html() );
for set content to editor its showing error.
if i load the textarea form and load tinymce again it will work ;) I don't what is happening here.
From your comments, what I suggest is that you instantiate tinymce outside your $(document).ready(), and before your html form.

Categories