I save the content of the TinyMCE editor in eminer database. This works also.
Now I want users to be able to edit their posts again. So I need to load the code stored in the database back into the editor.
This works as long as it is only text. As soon as an image or a table etc. should be loaded I get the error in the console:
Unexpected identifier 'https'
Does anyone have an idea how I can solve the problem?
Thanks
This is the content from the database
<p>This is a Test<img src="https://drive.tiny.cloud/1/4yv6jbs5sphwk14j3kzc28z9lhdgsqum1qej45ayndlasxh6/40156af6-9a16-4b04-8b2d-9d5fb94de44c"></p>
I load the content from the database into the editor as follows:
var editorContent = "<?php echo $changelogData->content ?>"; tinymce.get("changelogContent").setContent(editorContent);
My editor Intit:
tinymce.init({ selector: 'textarea', content_css: 'document', plugins: 'tinydrive anchor autolink charmap codesample emoticons image link lists media table visualblocks wordcount checklist pageembed linkchecker', toolbar: 'undo redo | blocks fontfamily fontsize | bold underline strikethrough | link image media table | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat', menubar: false, statusbar: false, tinydrive_token_provider: '/editor/jwt', init_instance_callback : function(tinymce) { loadEditorData() } });
Related
the variable in double brackets comes from a Jinja/Flask template
here is the value of that variable, it is string
'<div id="item" >test</div>'
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent("{{editor_content|safe}}");
});
},
plugins: [
'advlist autolink autoresize link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table directionality template paste codesample'
],
imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
toolbar: 'insertfile undo redo paste | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | codesample',
images_upload_url: '{{ url_for("imageuploader") }}',
automatic_uploads: true,
images_reuse_filename: false,
images_upload_base_path: '/static/uploads',
visualblocks_default_state: true,
forced_root_block : 'p',
});
</script>
My code fails, this is what the browser console shows
Uncaught SyntaxError: missing ) after argument list
{{editor_content|safe}} instructs Jinja not to escape the code as it should be HTML
Update
More troubleshooting shows me that this is OK
"<div id='test'>sdsdsd</div>"
while this is not
'<div id="test">sdsdsd</div>'
How do I get around this because the source of the content of my editor uses " and not '
Turns out that inconsistent use of " in the initialization string is causing this issue
You should use " within tags for properties and you should use ' when initializing the editor
editor.setContent('{{editor_content|safe}}');
I have a php page with multiple tinymce editors (textarea) with same classname and seperate id. My issue is the image upload icon is showing only on the last editor but not in the above editors. I am using tinymce version 4.7.2.
This is the image upload button i need to show:
Here is the full image of my php page
Please help me to solve this issue.
Why not just add the responsivefilemanager to the toolbar then you dont need the image
TinymceModule.withConfig({
plugins: ['link image code responsivefilemanager'],
toolbar: 'responsivefilemanager',
menubar: false,
external_filemanager_path: '.../filemanager/',
filemanager_title: 'Content Server',
filemanager_crossdomain: true,
external_plugins: {"filemanager": ".../filemanager/plugin.min.js" }
})
file_picker_callback will solve the above issue. for ref refer this link http://www.responsivefilemanager.com/demo.php
tinymce.init({
selector: "textarea#content, textarea#details",theme: "modern",width: 500,height: 200,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
"table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
],
toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ",
image_advtab: true ,
file_picker_types:'file image media',
file_picker_callback:function(cb,value,meta){var width=window.innerWidth-30;var height=window.innerHeight-60;if(width>1800)width=1800;if(height>1200)height=1200;if(width>600){var width_reduce=(width-20)%138;width=width-width_reduce+10;}var urltype=2;if(meta.filetype=='image'){urltype=1;}if(meta.filetype=='media'){urltype=3;}var title="RESPONSIVE FileManager";if(typeof this.settings.filemanager_title!=="undefined"&&this.settings.filemanager_title){title=this.settings.filemanager_title;}var akey="key";if(typeof this.settings.filemanager_access_key!=="undefined"&&this.settings.filemanager_access_key){akey=this.settings.filemanager_access_key;}var sort_by="";if(typeof this.settings.filemanager_sort_by!=="undefined"&&this.settings.filemanager_sort_by){sort_by="&sort_by="+this.settings.filemanager_sort_by;}var descending="false";if(typeof this.settings.filemanager_descending!=="undefined"&&this.settings.filemanager_descending){descending=this.settings.filemanager_descending;}var fldr="";if(typeof this.settings.filemanager_subfolder!=="undefined"&&this.settings.filemanager_subfolder){fldr="&fldr="+this.settings.filemanager_subfolder;}var crossdomain="";if(typeof this.settings.filemanager_crossdomain!=="undefined"&&this.settings.filemanager_crossdomain){crossdomain="&crossdomain=1";if(window.addEventListener){window.addEventListener('message',filemanager_onMessage,false);}else{window.attachEvent('onmessage',filemanager_onMessage);}}tinymce.activeEditor.windowManager.open({title:title,file:this.settings.external_filemanager_path+'dialog.php?type='+urltype+'&descending='+descending+sort_by+fldr+crossdomain+'&lang='+this.settings.language+'&akey='+akey,width:width,height:height,resizable:true,maximizable:true,inline:1},{setUrl:function(url){cb(url);}});},
external_filemanager_path:"filemanager/",
filemanager_title:"Responsive Filemanager" ,
object_resizing : false,
external_plugins: { "filemanager" : "../../../filemanager/plugin.min.js"}
});
When I click on the insert image button to upload an image I get this pop up error
<script>tinymce.init({
selector: 'textarea',
height: 400,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview
anchor', 'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code '
],
filemanager_crossdomain: true,
external_filemanager_path:"responsive_filemanager/filemanager/",
external_plugins: { "filemanager" :
"/responsive_filemanager/filemanager/plugin.min.js"},
toolbar1: "undo redo | bold italic underline | alignleft
aligncenter alignright alignjustify | bullist numlist outdent
indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image
media | forecolor backcolor | print preview code ",
image_advtab: true ,
filemanager_title:"Responsive Filemanager" ,
});</script>
Here is my script for the filemanager/TinyMCE, I havent touched the config.php file either. All I have done is downloaded the files and directed to my script to the correct path and it pulls the buttons for the filemanager in okay on TinyMCE but when I go to upload an image I get that error pop up.
Open lfm.php. This is in the config folder if you're using Laravel. Change:
'base_directory' => 'public',
to the directory the filemanager is in. For example:
'base_directory' => '../another_directory',
I have an tiny mce editor like image bellow:
and I want to put Code Sample Plugin of tinymce editor in phpfox like:
Please tell me what should I do.
In case you don't have codesample installed, you can download entire bundle from tinymce.com and include plugin.min.js from directory js/tinymce/plugins/codesample/
Download prism.js and prism.css from prismjs.com and include in your HTML page
Modify your tinymce_setup.js and add codesample to your tinymce_setup.js
My tinymce_setup.js looks like
tinymce.init({
selector: 'textarea',
height: 500,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code codesample'
],
toolbar: ("insertfile undo redo | styleselect | bold italic | " +
"alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | link image table | " +
"code fullscreen codesample"),
});
I'm upgrading tinyMCE from 3.4.2 to 4.0.1. Everything works perfect locally. But problem started when I published everything at server. Toolbar loads fine but the icons are not showing properly. Note: I have separate projects for app and CDN. I'm guessing this is a cross-domain/url reference issue but unable to figure it out. Currently the toolbar is loading as shown in the - screencast!
tinyMCE.init({
// General options
theme: "modern",
editor_selector: "mceDesignerEditorAutoresize",
relative_urls: false,
convert_urls: false,
toolbar1: "cut copy paste | bold italic | undo redo | bullist numlist | outdent indent blockquote | link unlink image code | inserttime preview | forecolor backcolor | imgCustom attachCustom",
toolbar_items_size: 'small',
plugins: [
"autoresize advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
accessibility_warnings: false,
accessibility_focus: false,
setup: function (ed) {
ed.addButton('imgCustom', {
title: 'Image',
image: $("#jsTinyMCEImageUrl").val().toString(),
onclick: function () {
openModalPopup($("#jsTinyMCEImagePath").val(), "width=700,height=600");
}
});
ed.addButton('attachCustom', {
title: 'Attachment',
image: $("#jsTinyMCEAttachUrl").val().toString(),
onclick: function () {
try {
openModalPopup($("#jsTinyMCEAttachPath").val(), "width=400,height=200");
}
catch (e) {
}
}
});
},
language: $('#TinyMCECurrentLanguage').val(),
paste_auto_cleanup_on_paste: true
});
It is found that /js/tinymce/skin/lightgray/fonts folder was not being copied to server. This happened as Visual Studio didn't recognize the font files and marked them as 'None' in Build Action and as a result these files were not being published.
Solved it by right clicking the font files, select Properties and Set value for Build Action to 'Content'.
Just wanted to add some further information to this question, for people who come along later. I experienced exactly the same problem, but in my case it was to do with cross-site font loading in Firefox. (Perhaps you will still have the problem if you test in Firefox)
Anyway the solution is to allow cross-site loading of fonts with the following http header on the site that the TinyMCE code is being loaded from:
Access-Control-Allow-Origin "*"
Full details of how to do this can be found at How to add an Access-Control-Allow-Origin header