I'm trying to integrate MathType into my TinyMCE editor but I get the following error:
Uncaught TypeError: tinymce.create is not a function
at 2 (plugin.js:1:163253)
at __webpack_require__ (plugin.js:1:208570)
at plugin.js:1:208973
at plugin.js:1:208997
I'm using the external plugin route as described here:
https://docs.wiris.com/mathtype/en/mathtype-integrations/mathtype-web-interface-features/external-integration.html
My code (partial):
function create_tinymce(element){
//alert(element)
document.getElementById("savePost").style.display = 'block';
tinymce.init({
selector: element,
inline: true,
//skin: 'jb',
custom_elements: 'dictTerm',
extended_valid_elements: 'dictTerm',
content_css : 'css/stylesheet.css',
menubar: false,
toolbar: 'undo redo | table image | alignleft aligncenter bullist numlist | forecolor backcolor link | h2 calculationBox importantBox | tiny_mce_wiris_formulaEditor code',
plugins: 'code image lists link preview table',
external_plugins: { tiny_mce_wiris: 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' },
I am also loading in jQuery and he tinyMCE plugin before the html loads:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.tiny.cloud/1/###APIKEYHIDDEN###/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1//###APIKEYHIDDEN###/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.jsdelivr.net/npm/#tinymce/tinymce-jquery#2/dist/tinymce-jquery.min.js"></script>
Does anyone know what might be going wrong?
Any help would be greatly appreciated.
Thank you!
In order to solve the issue, is it possible that there are missing closing tags in your code?
tinymce.init({
selector: '#additional-information',
.
.
.
}); ----> **this is missing?**
You can find more information here.
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 the following simple script with html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <!-- tinymce dependency -->
<script>
tinymce.PluginManager.add('imageClick',(editor)=>{
editor.on('click',function(event){
const element = event.target;
//add code to open the internal toolbar
})
})
tinymce.init({
selector:'textarea',
skin: 'lightgray',
theme: 'modern',
plugins: 'link image paste autolink media lists imageClick',
toolbar: ['bold italic underline | alignleft aligncenter alignright alignjustify | link media image | undo redo '],
});
</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>
Now I want to display a custom toolbar over the image with some custom provided buttons. Similar to https://www.tinymce.com/docs/plugins/imagetools/ but I have no idea how to do that.
Do you have any Idea how programmatically to create custom toolbars over specific html elements in tinymce?
The functionality that provides that is the editor.addContextToolbar where you can find related documentation on:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#addcontexttoolbar
In other words a recomended way to develop your plugin is:
tinymce.PluginManager.add('imageClick',function(editor){
var lastSelectedImage=undefined;
function addEvents() {
editor.on('click', function (e) {
if (lastSelectedImage && lastSelectedImage.src != e.element.src) {
lastSelectedImage = undefined;
}
// Set up the lastSelectedImage
if (isEditableImage(e.element)) {
lastSelectedImage = e.element;
}
});
}
function isEditableImage(img) {
var selectorMatched = editor.dom.is(img, 'img:not([data-mce-object],[data-mce-placeholder])');
return selectorMatched;
}
function addToolbars() {
var toolbarItems = editor.settings.myimagetools_toolbar;
if (!toolbarItems) {
toolbarItems = 'alignleft aligncenter alignright alignjustify';
}
editor.addContextToolbar(
isEditableImage,
toolbarItems
);
}
addToolbars()
addEvents()
})
Based on the source code of imagetools plugin.
Tip:
You can have access to plugin source code by download the dev package of tinymce:
http://download.ephox.com/tinymce/community/tinymce_4.6.4_dev.zip?_ga=2.167213630.1854029251.1501225162-27629746.1501225162
Unziping it && look into ^location_you_unziped/tinymce/src/plugins^ in order to have a look and base your plugins over the ones that tinymce provides.
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'm trying to use TinyMCE's PHP Spellchecker 4.0 plugin but keep getting a Error: Missing input parameter 'text' error when I try to have it do any actual spell checking.
Here's my code:
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
menubar:false,
statusbar:false,
selector: "textarea",
plugins: ["link","spellchecker"],
toolbar: "bold italic | numlist bullist | link unlink | spellchecker",
force_br_newlines: true,
force_p_newlines: false,
forced_root_block: '',
height: 300,
spellchecker_rpc_url: "spellchecker.php"
});
</script>
<textarea>tgis is misspelled text</textarea>
You can test it out live here:
http://www.frostjedi.com/terra/dev/tinymce/test.html
Here's a link to the version of the spellchecking program I'm using:
http://www.tinymce.com/wiki.php/PHP_Spellchecker
I used Wireshark to see what the above is sending over and it's this (via POST):
{"id":"c0","method":"spellcheck","params":{"lang":"en","words":["tgis","is","misspelled","text"]}}
And the response I'm getting:
{"error":"Missing input parameter 'text'."}
The response is correct - there is no input parameter named text. But I'd expect the javascript to add it if it was needed.
I tried doing <textarea name="text"> and <textarea id="text"> as well to no avail.
Any ideas?
The plugin is broken. As per my OP what it's posting is json encoded. And yet the PHP engine is expecting non-JSON encoded code. From spellchecker\includes\Engine.php:
$method = self::getParam("method", "spellcheck");
$lang = self::getParam("lang", "en_US");
$text = self::getParam("text");
Replacing that with this got it working for me:
global $HTTP_RAW_POST_DATA;
$data = json_decode($HTTP_RAW_POST_DATA);
$method = $data->method;
$lang = $data->params->lang;
$text = $data->params->words;
I think it's dumb that the plugin listed pretty prominently on their website doesn't work out of the box but whatever.
I'm trying to integrate the Roxy Fileman (http://www.roxyfileman.com) in TinyMCE.
Unable to make the icon appear Roxy Fileman after clicking Trigger Image of TinyMCE but it is not working correctly.
When I open the Roxy Fileman received from these mistakes obvious warning from Chrome:
E_LoadingConf
E_ActionDisabled
Error loading language file
I have already sent a message to the staff of the Roxy Fileman but got no answer.
Can anyone help me integrate this? I need a way to upload photos on TinyMCE.
If anyone has any other plugin to indicate I accept.
Below is my code:
<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<script>
// This must be set to the absolute path from the site root.
var roxyFileman = 'js/tinymce/plugins/fileman/index.html?integration=tinymce4';
$(function() {
tinyMCE.init({language : 'pt_BR', selector: 'textarea#elm1', menubar : false, plugins: 'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table contextmenu directionality template paste textcolor',
toolbar: "insertfile undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | link image | bullist numlist outdent indent | forecolor", file_browser_callback: RoxyFileBrowser});
});
function RoxyFileBrowser(field_name, url, type, win) {
var cmsURL = roxyFileman; // script URL - use an absolute path!
if (cmsURL.indexOf("?") < 0) {
cmsURL = cmsURL + "?type=" + type;
}
else {
cmsURL = cmsURL + "&type=" + type;
}
cmsURL += '&input=' + field_name + '&value=' + document.getElementById(field_name).value;
tinyMCE.activeEditor.windowManager.open({
file: cmsURL,
title: 'Upload de Arquivos',
width: 850, // Your dimensions may differ - toy around with them!
height: 650,
resizable: "yes",
plugins: "media",
inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous: "no"
}, {
window: win,
input: field_name
});
return false;
}
</script>
*TinyMCE is 4.0.16 (2014-01-31). Roxy'm running on Windows server with support for PHP 5.2.17.
Thank you for your attention.
Have you tried changing the conf.json file
the integration should be changed from custom to :-
"INTEGRATION": "tinymce4",
And possibly in your web config adding
<system.webServer>
...
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
...
It seems that Roxy Fileman configuration and language files are misssing or contain syntax errors.
Try to load js/tinymce/plugins/fileman/conf.json in your browser and see the result. All configuration and language files are in json format and must be utf8 encoded.
You can also debug using developer tools -> network to see the server responses when Fileman initializes.
E_LoadingConf means that configuration file cannot be loaded or parsed.
E_ActionDisabled is because the configuration is not loaded
E_LoadingConf and E_ActionDisabled Error loading language file are errors that might be caused because your server is not configured to handle json files properly.
You will need to configure json as a new mime type.
If your server works with IIS, you need to follow the steps listed on this page
Good luck !
Try changes this
document.getElementById(field_name)
To be
document.getElementById("your_id_tinymce")