How to fix plugin error appear inside TinyMCE 4 editor - javascript

I wrote plugin for TinyMCE 4 and added into setup function.
This plugin works well but it shows me a message error float inside editor. I don't know why.
error message
This file is called customConfig
import Export2Doc from '../config/plugins/export/plugin';
export default {
setup: function(editor){
editor.addButton('mybutton', {
type: 'menubutton',
text: 'إستخراج الي',
// icon: false,
menu: [{
text: 'Pdf',
onclick: function() {
window.open('preview');
}
},
{
text: 'Docx',
onclick: function(){
Store.dispatch('getDocumentContents').then( response =>{
let contentString = "";
Store.state.documents.documentContents.forEach(element => {
if(element.content != ""){
console.log(element.content, element, response);
contentString += '<br style="page-break-after: always; clear: both" />'+element.content;
}
});
Export2Doc.excute(contentString, 'atroha');
});
},
}]
});
}
}
Then inside editor it looks like this :
import customConfig from "./customConfig";
const config = {
selector: "#editor",
directionality: "rtl",
branding: false,
height: 500,
theme: "modern",
// toolbar: 'mybutton',
plugins:
"mybutton fullscreen charmap hr anchor searchreplace wordcount pagebreak print preview image table "+
"anchor advlist lists tinymcespellchecker a11ychecker "+
"imagetools mediaembed link contextmenu directionality "+
"save autosave",
// toolbar1:
// "table | image | bold link | alignleft aligncenter alignright | ltr rtl | numlist bullist | outdent indent | references | threads",
// fullscreen pagebreak preview |
// 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 emoticons template paste textcolor",
// toolbar2: " media | forecolor backcolor emotions | help",
toolbar1: ' table insertfile undo redo mybutton save | styleselect | bold italic | alignleft | ltr rtl | aligncenter alignright alignjustify '+
'| bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | references | threads',
image_advtab: true,
// language: "ar_EG",
menubar: true,
autosave_ask_before_unload: true,
setup: customConfig.setup,
}
export default config;
I try to hide the message but I can't.

That error message means that TinyMCE is looking for your plugin (mybutton) in the place it looks for all of its standard plugins and the plugin is not found in that location.
The issue is that you have not actually created a plugin for TinyMCE in the code you show - you appear to create toolbar button via code.
To move this forward you have two options...
Use the setup function in your TinyMCE configuration and create the toolbar button in that function. You can then add the toolbar button to your toolbar configuration setting. In this scenario you are not creating a plugin so you don't add anything to the plugins configuration setting.
Create a proper TinyMCE plugin and load that plugin using the plugins configuration setting. The plugin can register a toolbar button on the toolbar as it loads.
If you choose option 1...
Assuming your code is wired together correctly you can just remove your attempt to load a plugin called mybutton (there is no such plugin) and instead add mybutton to the toolbar1 configuration setting. This will explicitly add your defined toolbar button to the TinyMCE toolbar.
If you choose option 2...
As you are using the TinyMCE Cloud platform to load TinyMCE you need to use the external_plugins configuration option to load your custom plugin from some location on your server. You can't host a custom plugin on the TinyMCE Cloud platform and just adding a plugin to the plugins configuration option will tell TinyMCE to load it from the same place it loads all its other plugins.
If you want to look at this second option here is the documentation on how to create a proper plugin for TinyMCE:
TinyMCE 5: https://www.tiny.cloud/docs/advanced/creating-a-plugin/
TinyMCE 4: https://www.tiny.cloud/docs-4x/advanced/creating-a-plugin/

Related

How to Disable Copy/Paste in tinymce

i'm using tinymce RTF editor on my website. i want to disable copy/paste option in tinymce textarea. i found this method on stackoverflow but it didn't work for me.
How to Prevent/disable copy and paste in Tinymce
document.addEventListener('paste', function(e){
e.preventDefault();
});
You should be able to use paste_preprocess if you include the paste plugin. If you're using paste_preprocess, make sure you're passing it as an option to tinymce.init(), and also including the plugin. For example:
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
paste_preprocess: function (plugin, args) {
console.log("Attempted to paste: ", args.content);
// replace copied text with empty string
args.content = '';
},
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
See this updated fiddle for an example.
Earlier answers suggesting to replace args.contents = '' do not actually prevent a paste operation, they rather alter the contents of the paste to an empty string which still gets pasted.
TinyMCE Event Doc
This actually prevents the paste completely.
paste_preprocess: (plugin, args) => {
args.stopImmediatePropagation();
args.stopPropagation();
args.preventDefault();
});
As previously answered, you can use paste_preprocess. However, you'll need to add paste to plugins.
Example:
tinymce.init({
...,
plugins: [
"paste"
],
paste_preprocess: function (plugin, args) {
console.log(args.content);
args.content = '';
}
});
You can intercept paste in the tinymce.init
paste_preprocess: function(plugin, args) {
console.log(args.content);
args.content = '';
}

Javascript Error when uploading image TinyMCE

I'm following the getting started documentation guide from this page. It is supposed to work like this demo.
I implemented it with this code:
$(".answers-list .answer textarea, textarea.soal").tinymce({
images_upload_url: 'uploadimage.php',
theme: "modern",
plugins: [
"eqneditor advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "undo redo | eqneditor link image | styleselect | bold italic | bullist numlist outdent indent ",
});
When I try to upload the image, the javascript console gives error like:
tinymce.min.js:12 Uncaught TypeError: b(...).createObjectURL is not a function
at Object.c [as createObjectURL] (tinymce.min.js:12)
at g (tinymce.min.js:12)
at Object.f [as create] (tinymce.min.js:12)
at b.h (plugin.min.js:1)
at b.e [as fire] (tinymce.min.js:7)
at b.fire (tinymce.min.js:7)
at HTMLInputElement.<anonymous> (tinymce.min.js:16)
at a (tinymce.min.js:2)
at HTMLInputElement.p (tinymce.min.js:2)
It doesn't even start to process the upload. What's wrong with the code?
I had the same problem. My solution was to rename the custom global varname URL to something different like WEBSITE_URL.
I think that TinyMCE is using URL as global varname too.
I think #rjgamer is right. The only way I could fix this was:
window.native_url = URL;
$(window).on("load", function() {
// after tinymce script is loaded
URL.createObjectURL = native_url.createObjectURL;
});
its bad but it works.

tinyMce not initialized upon second visit to angular partial view

I'm using tinyMce (the native one, not the angular ui directive)with my angular app. The text area which tinyMce converts to an html editor is located in a partial view (i'm using angular route). The problem is that the first time the app visits the partial view everything is ok, however the next times the user chooses this view the text are is not converted to tinyMce editor.
So my question is how do I make tinyMce initialization code hit each time the user visits the partial?
I saw similiar questions but didn't understand any of the solutions....
Here is my init tinyMCE code which is located in the controller of the partial view:
angular.module('sam').controller('groupMailController', ['$http', '$log', '$routeParams', 'User', function($http, $log, $routeParams, User) {
tmp = this;
//a factory which passes paramteres cross controllers
this.user = User;
//get list of building objects
this.availableBuildings = _.values(this.user.buildings);
$log.log('init meee !!');
tinymce.init(
{selector:'textarea',
directionality : 'rtl',
plugins: ["advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste directionality"],
toolbar: "undo redo | styleselect | bold italic | link image | alignleft aligncenter alignright | ltr rtl"});
}]);
You can remove the current active editor before calling init().
if (tinyMCE.activeEditor != null)
tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'myTextArea');
tinymce.init({
selector: "#myTextArea"
});
Or you can use TinyMCE Angular plugin. Here is the info :
https://github.com/angular-ui/ui-tinymce
This is a late answer for those who may have the same issue. The problem is that tinymce is still keeping the old instance of the editor and initializing it again won't work. So the solution consist of deleting that instance on scope destroy event.
$scope.$on('$destroy', function() {
var tinyInstance = tinymce.get('#myTextArea');
if (tinyInstance) {
tinyInstance.remove();
tinyInstance = null;
}
});
Hope this will help
Changing the textarea's id when routing, forces the tiny-mce angular module to refresh and re-create the editor.

Initiating TinyMce on jQuery UI dialog

A click event on #open_dialog triggers a jQuery UI dialog with a ajax request to /ajax/request/url/
I want to initiate Tinymce on a textarea that is beeing sent back from the ajax request.
With the following code I get the log message "ajax done!" every time i click #open_dialog (and the ajax request is done) but Tinymce is only loaded the first time the dialog is opened. How come? And how do I initiate tinymce every time the dialog is loaded?
$('#open_dialog').click(function() {
$.when($.ajax("/ajax/request/url/")).done(function() {
console.log("ajax done!");
tinymce.init({selector:"textarea",
toolbar: "undo redo cut copy paste | bold italic underline | bullist numlist | table | styleselect | removeformat ",
plugins: "paste, table",
paste_word_valid_elements: "b,strong,i,em,h1,h2,table,tr,td,th",
menubar: false,
statusbar: true,
resize: "both"
});
});
});
Finally solved it by removing old DOM and old editors. ee_body below is the DOM id of the textarea.
$(document).ready(function() {
tinymce.init({
mode:"none",
toolbar: "undo redo cut copy paste | bold italic underline | bullist numlist | table | styleselect | removeformat ",
plugins: "paste, table",
paste_word_valid_elements: "b,strong,i,em,h1,h2,table,tr,td,th",
menubar: false,
statusbar: true,
resize: "both"
});
});
$('#open_dialog').click(function(){
//Remove old editors and DOM-elements
tinymce.EditorManager.execCommand("mceRemoveEditor", false, "ee_body");
$('#ee_body').remove();
// When ajax request to new email is done, load Tinymce
$.when($.ajax("/ajax/request/url/")).done(function() {
tinyMCE.execCommand("mceAddEditor", true, "ee_body");
});
});

how to make tinymce 4 toolbar external and always visible?

I have this settings for tinyMCE:
tinymceOptions = {
inline: true,
resize: false,
plugins: "textcolor",
selector: "div.editing",
toolbar: "forecolor backcolor",
fixed_toolbar_container: ".my-toolbar"
}
and that worked as I it should be, but doesn't satisfy my needs, what I want is a fixed external toolbar for multiple editor instances that will not disappear when focus is lost (blur event) which not the case with this settings.
Note:
removing the inline: true has no effect!?
If you want the toolbar to be external, and you don't want to auto-focus it, here's what you do:
tinymceOptions = {
inline: true,
resize: false,
plugins: "textcolor",
selector: "div.editing",
toolbar: "forecolor backcolor",
fixed_toolbar_container: ".my-toolbar",
init_instance_callback: function (editor) {
// This will trick the editor into thinking it was focused
// without actually focusing it (causing the toolbar to appear)
editor.fire('focus');
},
setup: function (editor) {
// This prevents the blur event from hiding the toolbar
editor.on('blur', function () {
return false;
});
}
}
I'm looking for the same thing here. I have a somewhat hacky approach that I discovered on the TinyMCE forums and am currently looking for a better approach.
By throwing an error after the blur event is fired it prevents TinyMCE's cleanup from removing the editor.
tinymce.init({
menubar: false,
plugins: "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media textcolor table contextmenu paste wordcount",
toolbar: [
"undo redo removeformat searchreplace code",
"styleselect fontsizeselect forecolor",
"bold italic underline strikethrough superscript subscript",
"alignleft aligncenter alignright alignjustify | outdent indent blockquote",
"bullist numlist table | link image media"
],
selector: '.selected .inline-preview',
inline: true,
autofocus: true,
fixed_toolbar_container: 'section[data-sidebar-text-controls] > div',
init_instance_callback: function () {
tinymce.activeEditor.focus();
},
setup: function (editor) {
editor.on('blur', function () {
throw new Error('tiny mce hack workaround');
});
}
});
My understanding is each editor has it's own toolbar.
When using 'fixed_toolbar_container' it simply displays the current editor's toolbar in that container.
If no editor is selected it can't know which editor's toolbar you want displayed - sadly it doesn't yet have mind reading capabilities ;)
A possible work-around for you would be to somehow make sure an editor is always selected, therefore a toolbar will always be displayed. Sorry, no time to figure out how but maybe others can expand (blur()/focus() maybe?).
With an editor initialized with auto_focus: true, and the following in the css will force the tool bar to always be visible. Though the toolbar does not exist until focus is made on the editor.
.mce-tinymce.mce-tinymce-inline.mce-container.mce-panel {
display: block !important;
}

Categories

Resources