I use TinyMCE version 4.3.10, with the latest version of UIkit 3, the problem is that if I insert the tinymce inside a textarea that is inside a div in modal, as soon as I open the div through the uk function -toggle. I load the tinymce screen but I can't write, in the code I noticed that the body is empty, what can I do?
I solved this by attaching TinyMCE after the modal is shown. Hook into the modal event 'shown' or 'beforeshow', as shown below. You should also remove TinyMCE when the modal is hidden.
UIkit.util.on('#my-modal', 'shown', () => {
tinymce.init({
selector: '#my-textarea',
plugins: 'advlist autolink lists link charmap preview emoticons',
toolbar: 'bold italic underline | backcolor forecolor | emoticons',
toolbar_mode: 'floating',
menubar:false,
statusbar: false
});
});
UIkit.util.on('#my-modal', 'beforehide', () => {
tinymce.remove("#my-textarea");
});
UIkit.modal( "#my-modal" ).show();
Related
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() } });
I am trying to reset the content inside tinymce editor to default on a button click.
Here is my current tinymce initialization code and I also have initialized to set default content when the editor loads up. On button click I want to run setDefaultContent() function, which is used in tinymce.init
tinymce.init({
// General options
selector: "textarea",
editor_selector : "mceEditor",
branding: false,
**init_instance_callback: "setDefaultContent",**
height : "300px",
width : "1000",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
formats: {
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myleft'},
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'mycenter'},
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myright'},
alignfull: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myfull'}
},
content_style: '.myleft { text-align:left; } .mycenter { text-align:center; } .myright { text-align:right; } .myfull { text-align:justify; }',
forced_root_block: false
});
If you just want to clear the content use:
tinyMCE.activeEditor.setContent('');
I want to add keyboard shortcuts to my TinyMCE editor.
Here is my init code:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print'
],
toolbar: 'print | styleselect | bullist numlist',
});
I know that I need something along the lines of:
editor.shortcuts.add('ctrl+a', function() {});
But I don't understand how to connect the shortcuts code with my init code.
TinyMCE documentation here, but I was having trouble understanding it.
Here is how to do it:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
// add your shortcuts here
setup: function(editor) {
editor.shortcuts.add('ctrl+a', function() {});
}
});
Use the setup init parameter!
This is an expansion of the answer #Thariama provided. Code that worked for me was:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
setup: function(editor) {
editor.shortcuts.add('ctrl+a', desc, function() { //desc can be any string, it is just for you to describe your code.
// your code here
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print'
],
toolbar: 'print | styleselect | bullist numlist',
});
Alternatively you can also use the following, which will allow you to override key commands reserved by TinyMCE:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
setup: function(e) {
e.on("keyup", function(e) {
if ( e.keyCode === 27 ) { // keyCode 27 is for the ESC key, just an example, use any key code you like
// your code here
}
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print',
],
toolbar: 'print | styleselect | bullist numlist',
});
As a complement to the two previous answers, here is a full example:
tinymce.init({
//here you can have selector, menubar...
setup: function (editor) {
setLocale(editor);
// For the keycode (eg. 13 = enter) use: cf http://keycode.info
editor.shortcuts.add('ctrl+13', 'indent', function(){
tinymce.activeEditor.execCommand('indent');
});
editor.shortcuts.add('ctrl+f', 'subscript ', function(){
tinymce.activeEditor.execCommand('subscript');
});
},
});
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
When you copy and paste from a word document in to the tinyMCE editor sometimes there are unwanted <p> tags:
<p> </p>
<div class="starpasspro-example-question">
<p><strong>Example: Levels of strategy</strong></p>
<p>Microsoft is one of the world’s largest organisations, providing corporate solutions to businesses throughout the world to help them realise their fullest potential. At Microsoft, there are three levels of strategy as follows:</p>
</div>
<p> </p>
Here the code that generates I want to remove the <p> tags any way to do that ?
Add these Lines in your tinymce.init({ });
Example:
tinymce.init({
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false,
});
it will be helpful.
Add into your tinymce.yml file
forced_root_block : ""
force_br_newlines : true
force_p_newlines : false
Yes, this is possible. There is a secure way to remove all that html elements you want to removed (you may define what to keep). It is by using the tinymce config params paste_preprocess and a custom function strip_tags. Check it out here.
Add this to your functions.php file and the standard p-tags
tags will be removed by adding some parameters to the tiny_mce_before_init hook. If you want to see how it works, you can read further on this page: https://codex.wordpress.org/TinyMCE
////////////////////////////////////////////////////////////////////////
//////////REMOVE STANDARD <P> FROM TINYMCE EDITOR/////////////////////////
///////////////////////////////////////////////////////////////////////
function my_format_TinyMCE( $in ) {
$in['forced_root_block'] = "";
$in['force_br_newlines'] = TRUE;
$in['force_p_newlines'] = FALSE;
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
USE HtmlEncode="false" in BoundField
<asp:BoundField DataField="PostContent" HtmlEncode="false" />
Thanks to Prahalad Gaggar!
I had the same problem and I solved it by reading this topic: https://stackoverflow.com/a/22397116/14491024
here is my code with each time adding <p<br/<br/</p so annoying)
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}
And here is with problem SOLVED:
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
//remove <p><br /><br /></p>
forced_root_block: "" ,
force_br_newlines: true,
force_p_newlines: false,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}