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.
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 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 am new to this Firefox SDK , but what i have understood you can execute content Scripts on Pages.
Here is the Code
MAIN.JS
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: data.url("index.html"),
onReady: function (worker) {
worker.port.emit('turl',tabs.activeTab.url);
}
});
SIDEBAR.JS
$('#bt1').on('click',function(){
$('title').textContent;
});
INDEX.HTML
<!DOCTYPE HTML>
<html>
<body>
<input type="button" id="bt1" value="Click Me"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="sidebar.js"></script>
</body>
</html>
But this code tries to find out title of the Sidebar html.
I have also tried using contentScriptFile in Main.js but same thing happened
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: data.url("index.html"),
contentScriptFile: [data.url("jquery.min.js"),data.url("sidebar.js")],
onReady: function (worker) {
worker.port.emit('turl',tabs.activeTab.url);
}
});
The Jquery code is in the sidebar.js
Still no Results.Please help
There is no contentScriptFile for the Sidebar class.
Try this: copy the jquery library to a local file in the data folder, then refer to it using a relative path. Sidebars can only use 'local' JS, they cannot load scripts from the internet.
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 am trying to create an extension to display all the latest posts fetched from my feed using google feeds api. To implement this, I have added this code in background.js:
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('images/icon.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('My Postreader Extension');
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});});
and in popup.html,
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {eval(appAPI.resources.get('script.js')); }</script>
</head>
<body><div id="feed"></div></body></html>
The script.js file is-
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.xxxxx.com/feed/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement('a');
link.setAttribute('href', entry.link);
link.setAttribute('name', 'myanchor');
div.appendChild(document.createTextNode(entry.title));
div.appendChild(document.createElement('br'));
div.appendChild(link);
div.appendChild(document.createElement('br'));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
But I am unable to get desired result.The popup doesn't display anything.It just remain blank.
Since you are using a resource file for the popup's content, it's best to load the remote script from the crossriderMain function, as follows:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.request.get({
url: 'http://www.google.com/jsapi',
onSuccess: function(code) {
$.globalEval(code);
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">').html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
<div id="feed"></div>
</body>
</html>
[Disclaimer: I am a Crossrider employee]