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
Related
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.
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")
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
TinyMCE4 documentation is currently dismal. I have an insert image plugin compatible with Ruby on Rails but it relies on the deprecated tiny_mce_popup.js. There's no information for how I should update a plugin to circumvent use of that file.
TinyMCE 4 deprecates the old file_browser_callback in favor of the new file_picker_callback which has the advantage that it can return metadata.
tinymce.init({
selector: 'textarea.tinymce',
file_picker_callback: function (callback, value, meta) {
myFilePicker(callback, value, meta);
},
plugins: ['link image'],
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});
function myFilePicker(callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'File Manager',
url: '/Site/FileManager?type=' + meta.filetype,
width: 650,
height: 550,
}, {
oninsert: function (url) {
callback(url);
}
});
}
In your file browser to return the file to the main page you call mySubmit('/images/file_123.jpg') when you click on a hyperlink or a image.
function mySubmit(url) {
top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
top.tinymce.activeEditor.windowManager.close();
}
TinyMCE 3 was reliant on tiny_mce_popup.js for exchanging variables between the parent and dialogue. TinyMCE 4 does away with dialog.htm and with tiny_mce_popup.js
If you have a look at the image plugin, following editor.windowManager.open you can see the dialogue is created through JS alone. This eliminates the need for goofy access to parent variables through opener. If you can, stick with this template method.
I chose to stick with dialog.htm but I served it from rails so I wouldn't have deal with exchanging the form auth_token with JS. If you do this, remember that inserting your content should come from the plugin and not from your dialogue. This is my simple image uploader :
tinymce.PluginManager.add('railsupload', function(editor, url) {
var win, data, dom = editor.dom
// Add a button that opens a window
editor.addButton('railsupload', {
icon: 'image',
tooltip: 'Insert image',
onclick: showDialog
});
function showDialog() {
win = editor.windowManager.open({
title: 'Insert image',
name: 'railsupload',
url: '/attachments/tinymce?owner_type=' + editor.settings.owner_type + '&owner_id=' + editor.settings.owner_id,
width: 200,
height: 220,
bodyType: 'tabpanel',
buttons: [{
text: 'Insert',
onclick: submitForm
}]
});
}
function submitForm() {
editor.insertContent("<img src=\"" + self.frames[1].document.img_url + "\" />")
win.close()
}
});
You'll need a rails attachments controller and you'll need to pass your attachment init params through the url. If I build this out in a gem, it will be compatible with tinymce-rails and I'll update this answer.
Update: TinyMCE now has this page on migrating from 3.x: http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x