Using WindowManager for TinyMCE I open a window and it writes back raw HTML. But its truncating my links for my images. Whats weird is that it does NOT do it to the anchor tag. Just the image tag.
I have this bit of code
html = '<a title="'+ $('#title').val() +'" href="'+ $('#url').val() +'"><img src="'+ $('#imgURL').val() +'" /></a>';
var parentEditor = parent.tinyMCE.activeEditor;
parentEditor.execCommand('mceInsertRawHTML', false, html);
parentEditor.windowManager.close();
It DOES insert the html into the active Editor. When I log html to the console I get
<a title="Click Action" href="yahoo.com"><img src="http://marketingedu.mychm.co/images/buttons/c2a-button4.png" /></a>
However when I view the Source Code in the tinyMCE editor, it changed the images SRC attribute to
../../images/buttons/c2a-button4.png
Here is my entire javascript init for the TinyMCE editor
tinymce.init({
selector: ".editor",
setup: function(ed) {
ed.on('change', function(e) {
tinyMCE.triggerSave();
$('form').trigger('checkform.areYouSure');
});
ed.on('init', function(e) {
autoresize_max_height: 500
});
ed.addButton('defaultbtn', {
title: 'Insert Button',
icon: 'fa fa-plus-square',
onclick: function() {
// Open window
ed.windowManager.open({
title: 'Button Selector',
url: "<?=$this->url('/webinar/custombuttons') ?>",
width: 800,
height: 600
});
}
});
},
plugins: [
"advlist autolink link responsivefilemanager lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality template paste textcolor colorpicker responsivefilemanager autoresize"
],
toolbar: "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | table | link responsivefilemanager defaultbtn",
image_advtab: true ,
external_filemanager_path:"/filemanager/",
filemanager_title:"Filemanager" ,
external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
});
Change this:
var parentEditor = parent.tinyMCE.activeEditor;
parentEditor.execCommand('mceInsertRawHTML', false, html);
To This:
tinymce.activeEditor.setContent(html, {format: 'raw'});
Here is a reference link on how to set content on tinymce in various of ways.
Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With