I have a document editor that has an edit and readonly mode. The readonly mode is a static renderer that just uses HTML/CSS and the edit mode initializes a tinyMCE edtior. However I'm adding a track changes plugin that requires tinyMCE to be active in readonly and edit mode. My plan is to have tinyMCE active at all times but modify the toggle to switch between a readonly and edit state. The native tinyMCE methods for this don't seem to satisfy what I'm trying to do so this is my plan:
I used editor.setMode('readonly') and it makes the toolbar inaccessible but still visible and the document itself is still editable. Setting via DOM manipulation contenteditable="false" makes the document uneditable but it seems hacky, is there an editor method that would do this for me?
I can also just hide the toolbar using DOM manipulations but it also seemed hacky so I'm asking if there is a way to do this through some editor method without actually turning off any of the active plugins at the time?
You can disable the toolbar by setting the toolbar value in the configuration to false.
https://www.tiny.cloud/docs/configure/editor-appearance/#disablingthetoolbar
For example:
tinymce.init({
selector: "#theEditor",
toolbar: false,
...
});
Related
I am working on a chrome extension that lets users pre-configure action sequences.
I noticed that document.execCommand('undo') doesn't work in TinyMCE.
However tinyMCE.execCommand('undo') works fine.
Is there a way to make document.execCommand('undo') work directly in TinyMCE?
Any text or images or other items added to the editor creates an event in the separate, TinyMCE DOM. This is why document.exeCommand('undo'); won't affect added content and returns 'false' in the console.
To see this in action, I contrasted TinyMCE with a standard textarea and content editable section, and tried out the commands in the console: the document.execCommand returns 'true' when run in the console for undoing content in the textarea and contenteditable. But it does return 'false' for TinyMCE.
(As for a way to make document.execCommand run in TinyMCE, I'm not sure it is possible.)
after the tinymce.init() i can toggle the readOnly setting like this:
editor.mode.set("design");
editor.mode.set("readonly");
but how can i toggle the dark theme for the editor and the content?
this will not work:
editor.mode.set.content_css("dark");
editor.mode.set.skin("dark-oxide");
No, it is not possible. All the settings defined in the tinymce.init() function cannot be changed without reinitialization. However, reinitialization can be done very fast. You will need to perform 4 steps:
Save current content somewhere with getContent()
Destroy the TinyMCE instance with destroy()
Reinitialize
Use setContent() to add the content saved on step 1.
We switched from CKEditor to the new TinyMCE editor in Connections 6 CR5. This was a huge improvement. But out of the box, TinyMCE misses some of the features from CKEditor. For example setting borders on images in a way that could be handled by end users (so no manual HTML/CSS changes).
How can we add such a feature to TinyMCE, that the users get some image property dialog that allows setting image borders?
The image plugin has a configuration property image_advtab, which is set to false by default. I tried to enable it and now we see the advanced tab in the image propertys, which allows setting a border (and also advanced attributes) easily:
To enable it, we need to re-add the plugin, since this allows to override it's variables. Add the following to the externalPlugins array in config.js (which is located in ${CUSTOMIZATION_DIR}/javascript/tiny/editors/connections/config.js):
{
name: "image",
url: pluginBaseDir + "image/plugin.min.js",
settings: {
image_advtab: true
}
}
pluginBaseDir is defined above the editor config:
var pluginBaseDir = "/connections/resources/web/tiny.editors.connections/tinymce/plugins/";
how can I init tinyMCE before the element it is to apply to is not yet visible?
So yeah, this doesn't work in my case.
tinyMCE.init({
Assuming you are dynamically adding the textarea triggered from some action, then you can use the TinyMCE command "mceAddControl" to add TinyMCE to the page.
For example, if the textarea ID is "myText" then you add the editor control with
tinyMCE.execCommand('mceAddControl', true,"myText");
Of course, you need to setup the editor settings prior to adding the control. This is done by setting the setting attribute of the control. For example
tinyMCE.settings = {
theme: 'advanced',
....
};
I'm trying to use a custom video player NPAPI plugin (view FireBreath) inside an tabbed ExtJS application. The plugin lives in one tab, and the others contain presentations of other non-video data.
When switching from tab to tab, the element that contains the plugin is destroyed, and all plugin state is lost. Is there any way to configure an ExtJS tabbed panel so that the html contained in it is not altered when switching to another tab (just hidden)? The alternative is to re-populate the plugin state when returning to the tab, but this would be associated with an unacceptable delay (mostly while waiting for video key frames).
Thanks,
O
I don't know about your ExtJS approach, if you can solve it on that side that would of course be preferrable.
However, if you can't, you can avoid the reinitialization by moving the stream handling to a helper application that is running in the background. The plugin would launch it as needed and receive the stream data from it after registering for it.
The helper would be told when to kill a stream and possibly kill it by itself after some timeout (to avoid session leaks in case of crashing plugins etc.).
I was about to consider a helper application as recommended above, or look into rewriting the plugin to be windowless. Both might be more robust solutions for other JS frameworks.
Fortunately, the solution ended up being simpler than this, at least for ExtJS. By default, ExtJS sets "display: none" on the tabbed view's div whenever it is undisplayed, which calls the plugin destructor. After doing a little more looking through their enormous API, ExtJS has a parameter hideMode as part of the Ext.panel.Panel base class:
'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.
Defaults to: "display"
Setting the parent Panel that contains the plugin to hideMode: 'offsets' fixed the problem perfectly.