After updating to version 5 of TinyMCE from version 4 (mostly to fix an error with the color picker in version 4), the lists plugin stops working.
Initially, I tried creating custom buttons for the numlist and bullist, but that shouldn't be necessary since the plugin should handle that.
This is my initalization block:
tinymce.init({
selector: 'textarea',
menubar: false,
statusbar: false,
forced_root_block: 'div',
plugins: 'lists',
toolbar: 'fontselect | fontsizeselect | undo redo | bold italic underline forecolor | numlist bullist | alignleft aligncenter alignright alignjustify',
invalid_elements: 'script',
});
An error appears that says "Failed to initialize plugin: lists" and the console reports that Failed to initialize plugin: lists Error: "editor.addButton has been removed in tinymce 5x, use editor.ui.registry.addButton or editor.ui.registry.addToggleButton or editor.ui.registry.addSplitButton instead"
I looked in the code for the lists plugin, and every instance of addButton or similar was accompanied with ui.registry, so I don't understand where it's getting an editor.addButton command.
Are you sure that you are not still loading the old TinyMCE 4 plugin for lists? That error message would imply that the list plugin is trying to use an old TinyMCE 4 API to do something but the plugins we ship with TinyMCE 5 would not do that. Perhaps you have a caching issue?
Related
I have just started with Tinymce and am trying to build rich text editor on my web page using self-hosted package. After integration, setting the Theme to Advanced and Plugin to autoresize, I see the editor as -
Tinymce editor on web page (UI editor options looks distorted and not properly formatted)
I was expecting it to be something similar to what I see on Tinymce docs -
Tinymce editor on docs
Is this a Tinymce version specific or browser related issue? I tried downloading the latest version 5.8.2 (Development & Production), however the Themes I see are Silver & Mobile while it should be Simple & Advanced as I see in the official Tinymce documentations.
Also if I try to add multiple Plugins or Themes to my deployment as guided here, it doesn't reflect on my web page.
These is how I have initialized my Tinymce -
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script>
$(document).ready(function(){
if ($("#Test").length) {
tinyMCE.init({
// General options
mode : "exact",
elements : "Test",
theme : "advanced",
width : 800,
plugins : "autoresize",
content_style: " div, p { font-size: 14px; }"
});
}
});
</script>
It looks like you are using version 3 of TinyMCE (9+ years old). Upgrade to version 5 and it should be a lot better.
I have an app with Meteor React using TinyMce through react-tinymce (as per instructions at https://www.tinymce.com/docs/integrations/react/
I have a form component with TinyMCE which is called from an orderedlist to allow users to add comments. It works as expected except in the following situation:
When using either an iPad or iPhone (works fine on desktops and Android mobile).
The first instance of the form works as expected, however with subsequent attempts to add comments the cursor does not show up in TinyMCE and the user cannot enter their comments.
Without an external keyboard, when the form is opened the keyboard pops up - I have found that by manually closing the keyboard, then tapping in the textarea again it works.
With an external keyboard (on iPad), clinking the link in the menubar (I am using the link plugin) and then closing it and tapping in the textarea again it works.
I have attached code to show how TinyMCE is initiated (and removed), as well as how it is called in the form.
Any suggestions as to what I can try to get this to work properly on an iPad/iPhone would be greatly appreciated.
componentDidMount() {
tinymce.remove();
tinymce.init({
selector: '.addComments,
plugins: "autoresize link paste",
paste_as_text: true,
autoresize_bottom_margin: 10,
relative_urls: false,
link_title: false,
default_link_target: "_blank",
height: 200,
autoresize_max_height: 200,
toolbar: 'underline italic numlist link',
menubar: '',
skin: "lightgray",
statusbar: false,
content_css : '/css/content.css'
});
}
componentWillUnmount() {
tinymce.remove();
}
And it is rendered as follows:
<div className="AddComments" id={`background${this.props.meetingId}`} onChange={this.handleEditorChange}></div>
I found that others are having problems with TinyMCE on an iPad https://github.com/tinymce/tinymce/issues/2699 so I have switched to react-quill and it works fine across all platforms.
I am trying to add image upload to tinyMCE:
I use that:
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init(
{ selector:'textarea',
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste image"
],
automatic_uploads: true,
images_upload_url: 'postAcceptor.php',
images_upload_base_path: '/some/basepath',
images_upload_credentials: true
});
</script>
<textarea>Hello world</textarea>
This options only gives me the opportunity to put link to HTTP images, no features of uploading image
Adding the images_upload_xxxx attributes will not auto-magically add a user interface/functionality to select images and insert into TinyMCE. What those attributes do is tell TinyMCE what to do with Base64 images that end up in the editor when you do things like drag/drop images into the editor or use the Image Editor to modify an image in the editor.
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
If you want a UI to select an image from your hard drive and insert it into the editor you have a couple of choices...
Use a 3rd party plugin to do this (e.g. MoxieManager or others like it)
Build your own code to handle this process
Of course the fastest answer is to use an existing 3rd party tool. MoxieManager is commercial so there is a fee but you get support. There are Open Source tools that do the same thing but the level of support for those will vary based on how active the projects are and how involved the community is for each project.
I am trying to migrate from tinymce version 4.1.9 to latest tinymce version 4.3.12. I have a custom button which fires an event and simultaneously toggle (change the image of the button). It works fine with earlier versions of tinymce (all versions of 3.x and 4.1.2) but now giving an error message in tinymce 4.3.12.
Error message is: Uncaught TypeError: self.addClass is not a function in chrome debug console.
I have checked the latest documentation and which clearly shows .addClass is part of the library (tinymce.dom.DOMUtils class).
See below part of the code I am using:
tinymce.init({
setup: function (ed) {
ed.addButton('autosave', {
image: '/images/autosave_disk_off.png',
cmd: 'autosave',
selectable: true,
onClick: toggleAutoSave,
onPostRender: function() {
var self = this;
self.addClass('classAutosave');
ed.on('autosaveStateChanged', function(e) {
self.active(e.state);
});
}});
}
});
I want to add a class to current element so that image switching can be done.
Can someone help to understand the reason why this code is not working in tinymce 4.3.12?
Is there alternate way to add class in onPostRender?
Thanks
I sort of figured out the reason, what I have done is that compared the code of tinymce.js version 3.1.10 and tinymce.js version 3.2.0. I chose 3.1.10 because this is the last version in which my addClass() works. This is breaking in and after from 3.2.0.
While comparing, I found a lot of code changes has been done for addClass() and removeClass() API's. I also found that internally tinymce is using self.classes.add('classAutosave') to add new class. So I tried the same way in my plug-in and it works. So far, I haven't found any documentation mentioning this change. I am still checking in tinymce forums probably I will open a ticket with tinymce dev. Will update answer if any new info arrives.
Observation:
Use self.classes.add('classAutosave') instead of self.addclass('classAutosave')for adding new class with tinymce 3.20 -> tinymce 4.3.12.
Hello I am trying to add Font size plugin to Aloha Editor, however I keep getting the error:
TypeError: Aloha.settings.plugins is undefined
EDIT:
By doing the following I was able to fix the problem:
<script src="Scripts/aloha/lib/require.js"></script>
<script>
Aloha.settings = {
locale: 'en',
plugins: {}
</script>
<script src="Scripts/aloha/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,community/fontsize"></script>
Aloha.settings now has an empty plugins object before the plugins are actually loaded.
My problem is now more specific to the plugin I am trying to use. I don't know which settings to specify in the plugins: {} bracket.
The plugins im trying to use can be found here:
https://github.com/jstrouse/Aloha-Plugin-FontSize
https://github.com/deliminator/Aloha-Plugin-Colorselector
The latter is linked to directly from the official page:
http://aloha-editor.org/guides/plugins.html