Hey I update my application with the new TinyMce4 and I like the new style, everything work proper except "Font Size" fontsizeselect drop down menu.
Any suggestion would be helpful!!! Thanks
Add to init TinyMCE convert_fonts_to_spans: true and font_size_style_values list
tinymce.init({
...
convert_fonts_to_spans: true,
font_size_style_values: "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
...
toolbar: "... fontsizeselect ..."
...
});
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 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();
I get this error with an tinymce form
$(document).ready(function () {
if (typeof(base_url) == "undefined") {
var base_url = location.protocol + '//' + location.host + '/';
}
$("#additional-information").tinymce({
script_url : 'http://sab-solutions.com/phpformbuilder/plugins/tinymce/tinymce.min.js',
document_base_url: base_url,
relative_urls: false,
theme: "modern",
language: 'fr_FR',
element_format: "html",
menubar: false,
plugins: [
"autolink autoresize charmap contextmenu link lists paste table"
],
entity_encoding : "raw",
contextmenu: "link inserttable | cell row column deletetable",
toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link",
schema: "html5"
});
});
The form are in this website
sab-solutions.com/site/emploi.php
The error message is telling you that there is no tinymce property or method on the jQuery object - when you call
$("#additional-information").tinymce...
You are trying to access a method or property on the $("#additional-information") jQuery object that does not exist.
There is no issue using document ready to init TinyMCE you just can't do what you have in that code.
Instead do something like:
tinymce.init({
selector: '#additional-information',
.
.
.
});
This will get you the same end result (TinyMCE will take over that field).
If you are still stuck I would suggest creating a simple TinyMCE Fiddle that shows what you have so people can see all the code that you are trying to run.
Note: When you use $("#additional-information").tinymce... that would only work with the jQuery version of TinyMCE. If you are using the regular distribution those calls won't work. My recommendation would be to use the regular distribution as it does not add the overhead of creating additional jQuery objects to make TinyMCE play within the jQuery environment.
You need to include a reference to the tinyMCE JS library. They have a version hosted on CDN at //cdn.tinymce.com/4/tinymce.min.js, you can download it manually, or use a package manager like bower.
To refernece an external javascript file use the script tag with a src attribute:
<script src="//cdn.tinymce.com/4/tinymce.min.js" type="text/javascript"></script>
solved!
the problem was that i included twice the jquery js
I saw a lot of posts here but each one of them is too old and its not connected with tinyMCE 4.x I am searching the web from days and I can't find an option to set tinyMCE 4.x in readonly mode.
At this moment I just hide toolbars and menubars but I still can delete text and so on...
This is how I make it read-only.
tinymce.init({
selector: "#id",
readonly: true,
toolbar: false,
menubar: false,
statusbar: false
// more inits...
});
You may need to tweak your styles to fix the editor borders.
As stated in the TinyMCE docs as seen via this link https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x#readonly/, the readonly attribute should be set to '1' not to 'true'.
// Move focus to specific element
tinyMCE.init({
theme : "advanced",
readonly : 1
});
Hope this helps
This take me some time to research how to make tinymce in readonly mode.
The key point here is set readonly to 1 or 0, not true or false. For example here is my init code:
tinymce.init({
selector: "#html-textarea",
menubar: false,
statusbar: false,
resize: "both",
plugins: [
"textcolor image link preview code table media noneditable"
],
readonly: status, // **status hold value 0 or 1, NOT true or false**
toolbar: 'preview | undo redo | removeformat | cut copy paste | formatselect fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | link unlink image media | code table | bullist numlist | outdent indent blockquote'
});
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