tinymce - update plugin property after editor initialization - javascript

I need to update the colors list after init (or even on init), the plugins is textcolor. I'm using tinyMCE 4.1.9. How can I do that?

maybe in tinymce settings
tinymce.init({
textcolor_map: ["000000", "Black"]
});

Related

How to apply styles for empty lines in between the paragraph in tinymce, is it even supported in tinymce?

I have been trying to findout on how to apply styles for emptylines in tinymce.
For Example:
newline1
newline2
When I select the above two lines and change the font, and when I try to type something in the empty line inbetween the two lines , newly applied style is not applying for the content in the emptyline.
Current Version I am using : 4.7.13
TinyMCE 4.x is no longer a supported release of TinyMCE. If you try this same process in the latest release (5.10.x as I write this) you should get your intended behavior.
The key configuration option is format_empty_lines: https://www.tiny.cloud/docs/configure/content-formatting/#format_empty_lines
tinymce.init({
selector: "textarea",
format_empty_lines: true,
...
});

Ace Editor: Disable shadowed line where the cursor is

I am using Ace editor and I want to disable shadowed line where the cursor is.
Example
I have tried changing themes availables in Ace Mode Creator but all have this line shadowed.
Thanks!
This is a standard setting that doesn't require changing the theme
// e = active editor
e.setHighlightActiveLine(boolean)
Most themes have it set active by default. It should be a standard configurable setting to enable or disable it.
Hi I found the boolean attribute from the Ace demo here (https://ace.c9.io/build/kitchen-sink.html).
Is called Highlight Active Line
I hope it works for you :)
You're looking for:
i.e in chrome theme (https://ace.c9.io/lib/ace/theme/chrome.css) its
.ace-chrome .ace_marker-layer .ace_active-line {
background: none
}
in vuejs just add readonly="true" and I think it's

TinyMCE update content_style

I'm using the Angular wrapper for TinyMCE 4, initializing the editor with some custom css like this:
editorInit: Settings = {
menubar: false,
statusbar: false,
toolbar: false,
content_style: '.highlight {background-color: #fff877;}'
};
I'd like to dynamically change this content_style later, for example like this:
editor.settings.content_style = ".highlight {background-color: none;}";
However, this change is not being applied. Do I need to re-initialize the edior somehow everytime I want to change the content css?
Since I don't want to re-initialize the whole editor I went ahead and updated the style tag manually. Of course you should make sure that you're updating the correct one, here's a simplified version:
editor.iframeElement.contentDocument.getElementsByTagName('style')[1].innerHTML = `
.highlight {
background: none;
}`;
Once the editor is loaded you cannot dynamically load different CSS - once TinyMCE processes the configuration it won't re-examine those variables.
You can certainly use remove() and init() to re-initialize TinyMCE.
With the Angular we provide you likely need to reload the component that includes TinyMCE to get the remove/init cycle to happen.

How can I change the default font color palette in the TinyMce editor?

I have some preset colors that I'd like to add which goes along with my website's theme. How can I change the default font color palette in TinyMce?
screenshot-with-shadow.png http://img407.imageshack.us/img407/4526/screenshotwithshadow.png
A. The easy but dirty way is to edit the source code. Take the file tiny_mce.js and search for the string "000000,993300,333300," - this is the start of the color definition of the SplitButton. You may now edit the colors as you like. This will adjust the color setting for all ColorSplitButton instances.
B. An other way, not as dirty as to fiddle with the source code is to adjust the colors after editor initialization. You will need to add the setup parameter to your tinymce configuration (or put it inside one of your own tinymce plugins):
setup : function(ed) {
ed.onInit.add(function(ed) {
$('.mceColorSplitMenu').find('#_mce_item_2').get(0).setAttribute('data-mce-color','#0202FF');
$('.mceColorSplitMenu').find('#_mce_item_3').get(0).setAttribute('data-mce-color','#0203FF');
...
$('.mceColorSplitMenu').find('#_mce_item_41').get(0).setAttribute('data-mce-color','#0241FF');
});
}
Be aware that you might want to change other attriubtes of the SplitButton as well (i.e. the title, background color,...)
C. The cleanest but time-consuming solution is to develop an own plugin using an own ColorSplitButton
containing the colors of your choice in the setting for that control element (have a look at the tinymce developer version) there is a file called ColorSplitButton.js .
Here is some code containing the color setting:
ColorSplitButton : function(id, s, ed) {
var t = this;
t.parent(id, s, ed);
/**
* Settings object.
*
* #property settings
* #type Object
*/
t.settings = s = tinymce.extend({
colors : '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF',
grid_width : 8,
default_color : '#888888'
}, t.settings);
Try using the 'textcolor_map' setting on your editor configuration?
tinymce.init({
textcolor_map: [
'D7C0D0', 'color1',
'F7C7DB', 'color2',
]
})
I too was trying to find how to change the default font color palette in Tinymce. Mostly answers such as those above pointed to using one of the configuration properties based upon 'theme_advanced_'. However the 'advanced' theme isn't packaged with version 4 and the 'modern' theme that version 4 uses by default doesn't expose the same properties. A theme independent solution would be preferable anyway.
And lo! A quick look in the 'textcolor' plugin reveals that when the plugin is setting up its colormap it first looks to the aforementioned property on the editor's settings.
Well, it's a bit late but my solution would be:
1.Assuming that you're using 'textcolor' plugin, copy the 'textcolor' folder in 'plugins' directory and give it a new name (lets say 'mytextcolor'). That will be the name of your new plugin (mytextcolor)
2.in your 'mytextcolor' folder open plugin.min.js and on line 12 you'll find the
default color palette. modify that with new color names and codes.
3.in your tinymce config rename the 'textcolor' in plugins parameters to 'mytextcolor'
Hope that helps
theme_name_text_colors: "#hexhex, #hexhex, #hexhex"
Put that in the init() function and your color pallet will become custom. And you still get the more colors button.
Reference: https://www.youtube.com/watch?v=dySkwdZG9J0

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?
This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');
From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.
If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();
Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');
$('#name_of_your_textarea').val('');

Categories

Resources