How do i go on about customizing a color palette in tinymce to look like the image below?
image
I am using tinymce v5. Since the textcolor plugin is now enabled by default, my old code for customizing the palette is nt working anymore.
I would appreciate any idea
The colors can be set using the color_map setting. It is a list of paired hexadecimal colors without the leading # followed by a name.
Here is an example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: 'forecolor backcolor',
color_map: [
'000000', 'Black',
'808080', 'Gray',
'FFFFFF', 'White',
'FF0000', 'Red',
'FFFF00', 'Yellow',
'008000', 'Green',
'0000FF', 'Blue'
]
});
Related
I need to get HTML from TinyMCE, which I have done with the getText() function. However, it is returning the colours as hex values, instead of RGB, and I need RGB, not hex. Is there any way to force TinyMCE to return colours in RGB format? My setup is as follows:
tinymce.init({
selector: '.mainTextInput',
plugins: 'autosave a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
toolbar: 'fontselect restoredraft a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
toolbar_mode: 'floating',
autosave_interval: '1s',
height: '350',
content_style:
"body { font-family: 'Poppins'}",
tinycomments_mode: 'embedded',
tinycomments_author: 'Author name',
force_hex_style_colors: false
});
In HTML:
<div class="mainTextInput">
And I am getting text like this:
getTextButton.addEventListener('click', function() {
getText();
});
I'd really appreciate any help. Thanks in advance.
I've defined some formats via style_formats option, and after I use it, the only way I know to remove them is to edit HTML source. Is there any option to remove it by clicking repeatedly or defining new button?
style_formats: [
{title: 'Grey background', selector: 'p,ul,div', styles: {
'background-color': '#e9e9e9',
'border-radius': '5px',
'padding': '1em'
}}
],
Clear formatting button does not work.
I try to edit text by tinyMCE and do the following behavior. Then the background color cannot fill up the whole word.
Set font size = 18 (or greater).
Select strikethrough.
Select a text color.
Select a text background color.
Enter some text. => The background color does not fill up the text in height.
How can I fill up the whole word?
*Attach the tinyMCE editor http://codepen.io/anon/pen/jyPWvb
tinymce.init({
selector: 'textarea',
'menubar': false,
'plugins': [
'textcolor colorpicker '
],
'toolbar1': 'strikethrough underline | ' +
'forecolor backcolor | fontsizeselect'
});
In this case, the problem is that tinyMCE is wrapping strikethrough and background color as separate span elements around selected word and the font size is applied to the inner span.
You could try overwriting these in tinyMCE config:
tinymce.init({
formats: {
strikethrough: {inline: 'span', styles: { display: 'inline-block', 'text-decoration': 'line-through'}},
},
selector: 'textarea',
'menubar': false,
'plugins': [
'textcolor colorpicker '
],
'toolbar1': 'strikethrough underline | ' +
'forecolor backcolor | fontsizeselect'
});
http://codepen.io/anon/pen/PWqBXE
Is there a 'modern theme' (in other words, tinymce 4) equivalent of the theme_advanced_blockformats option?
theme_advanced_blockformats allows you to limit the set of available formats by adding the following to tinymce.init():
tinyMCE.init({
...
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
});
(TinyMCE theme advanced block formats)
I know that it's possible to explicitly specify which formats are available by passing an option to tinymce.init(), like so:
tinyMCE.init({
...
formats :
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
}
});
(TinyMCE formats)
Unfortunately, this wants a lot of detail about the way that each format is implemented that I don't have.
Any words of advice?
This is as of latest TinyMCE release (4.1.3).
Although the "block_formats" setting documents this functionality, I could only get this to work using the following:
tinymce.init({
selector: "textarea",
style_formats: [
{title: 'Paragraph', block: 'p'},
{title: 'Heading 2', block: 'h2'},
{title: 'Heading 3', block: 'h3'},
{title: 'Heading 4', block: 'h4'},
],
});
This is a simple example of the Tinymce documented custom formats syntax.
The documentation is a bit spotty right now but you can control what is a valid block as well as define default attributes for blocks using valid elements. Declaring allowed blocks and default styles are now up to the TinyMCE core rather than the theme. valid_elements declares allowed blocks and extended_valid_elements declares default attributes for allowed blocks.
tinymce.init({
selector: "textarea",
valid_elements : "a[href|target=_blank],strong/b,div[align],br",
extended_valid_elements: "img[class=myclass|!src|border:0|alt|title|width|height]",
invalid_elements: "strong,b,em,i"
});
I think this is what you need:
http://www.tinymce.com/wiki.php/Configuration:block_formats
Like:
block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4"
For Tinymce 4x, try the following:
tinymce.init({
selector: "textarea",
block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre',
});
https://www.tiny.cloud/docs-4x/configure/content-formatting/#block_formats
ben.hamelin's answer didn't work for me in v4.8.1.
I am using TinyMCE, to customise style dropdownlist, I use "content_css" property to specify the css file I want to use, for example:
content_css: "css/example.css"
Then it will add a span with class name, for examples:
<span class="style1">Hello World</span>
But how can I tell TinyMCE Style dropdownlist to add a span with inline style property instead of a class name? something like:
<span style="color:#E01B6A; font-size:12px;background-color:#D6D4D5;">Hello World</span>
The reason is I need to output the html code without the css file reference, inline style is required.
Thanks a lot
Found the answer by myself on TinyMCE website - can just use style_formats to list all inline styles
// Style formats
style_formats: [
{ title: 'style1', inline: 'span', styles: { 'color': '#E01B6A','font-size':'12px','background-color':'#D6D4D5'} },
{ title: 'style2', inline: 'span', styles: { 'color': '#6F7575','font-size':'14px','background-color':'#ABF5EC'} },
{ title: 'style3', inline: 'span', styles: { 'color': '#000000','font-size':'16px','background-color':'#8357F2', 'font-weight':'bold'} }
],