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'} }
],
Related
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.
He there!
I get along better and better with IP4 :-)
Now I am trying to use some Bootstrap classes inside the defailt tinyMCE but I can't help why it does not work.
I added a tinymceConfig.js inside my theme's assets-folder with the following content:
var originalConfigFunction = ipTinyMceConfig;
var ipTinyMceConfig = function () {
var originalConfig = originalConfigFunction();
originalConfig.visual_table_class = 'table';
originalConfig.style_formats = [
{title: 'Quote', inline: 'span', classes: 'quote'},
{title: 'Note', inline: 'span', classes: 'bg-primary'},
{title: 'Buttons', inline: 'span', classes: 'btn'}
];
return originalConfig;
}
But nothing happens.
Is my code bad? Do I have to activate some "switch" anywhere to make this change work?
Thank you and best regards,
Doc
The code looks good. Have you registered this file using ipAddJs function in your theme? Do you see this file to be listed in page source code? Do you see any errors in browser console?
We have an Orchard CMS 1.8 site that has been deployed and the content is now managed by the customer. One thing they are having a problem with is adding Bootstrap UI CSS classes to their content in the Html editor.
For example, they have some content and want to create a link to a "Register Now" page. It's easy enough to create the anchor tag using the toolbar buttons but without knowledge of HTML how would they turn that anchor tag into a Bootstrap button without diving into the HTML.
Also knowing that Bootstrap likes to combine classes like the following, how could a content manager pick a combination of styles from the Html Editor toolbar.
Register Now
Does anyone have a recommendation for customizing TinyMCE to make bootstrap classes more accessible to a content manager?
Thanks,
Brian
In Your Theme; add a ResourceManifest and create a reference to a Javascript file.
manifest.DefineScript("OrchardTinyMce").SetVersion("1.1").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");
this js file will be a TinyMCE customisation override. Make sure the ScriptName is the same and the version is always higher than the one at use in the TinyMCE module.
var mediaPlugins = ",|";
if (mediaPickerEnabled) {
mediaPlugins += ",mediapicker";
}
if (mediaLibraryEnabled) {
mediaPlugins += ",medialibrary";
}
tinyMCE.init({
theme: "advanced",
schema: "html5",
mode: "specific_textareas",
editor_selector: "tinymce",
plugins: "fullscreen,searchreplace,inlinepopups" + mediaPlugins.substr(2),
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo" + mediaPlugins + ",|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,blockquote,styleselect,|,code,fullscreen,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
convert_urls: false,
content_css: "/Themes/[*YOUR-THEME-NAME*]/Styles/custom.css",
valid_elements: "*[*]",
// shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]"
});
As you can see, now you can customise TinyMCE at will. Take note of the content_css property. That css file will be used in your Editor.
I use it all the time, so my clients can really have a true WYSIWYG experience.
One way to do this is to add bootstrap styles into style_formats in tinymce configuration.
Here is one way to do it by adding to orchard-tinymce.js
style_formats: [
{
title: 'Typography', items: [
{
title: 'Body Copy', items: [
{ title: 'Lead Body Para', block: 'p', classes: 'lead' }
]
},
{
title: 'Inline Text', items: [
{ title: 'Small', inline: 'small' },
{ title: 'Highlight', inline: 'mark' },
{ title: 'Deleted', inline: 'del' },
{ title: 'Strikethrough', inline: 's' },
{ title: 'Insert', inline: 'ins' }
]
},
Complete implementation is here:
https://www.bhavindoshi.com/blog/bootstrap-style-formats-in-tinymce-orchard-or-other-cms
I’ve been looking for a way to do this. I have a style sheet that is loaded into TinyMCE. The style sheet is generated via my content management system based of the active template. Problem is I can not get TinyMCE to let me select multiple CSS classes to a signle element. Here is a example:
.left_round_thumb_small {
width:65px;
height:65px;
border-radius:35px;
-moz-border-radius:35px;
-webkit-border-radius:35px;
-khtml-border-radius:35px;
background:url(/skins/msc_2013/images/lines.png) repeat;
float:left;
margin:0 25px 0 0;
}
.center_round_thumb_large {
width:162px;
height:162px;
border-radius:85px;
-moz-border-radius:85px;
-webkit-border-radius:85px;
-khtml-border-radius:85px;
background:url(/skins/msc_2013/images/lines.png) repeat;
position:relative;
margin:0 25px 0 0;
}
.round_border_black {border:1px solid black;}
.round_border_red {border:1px solid red;}
.round_border_blue {border:1px solid #00aeef;}
.round_border_green {border:1px solid #3cb64b;}
Now I know I could go in and do something like:
tinyMCE.init({
style_formats : [
{title: 'Left Thumb Black', classes: 'left_round_thumb_small round_border_black'},
{title: 'Center Thumb Blue', classes: 'center_round_thumb_small round_border_blue'},
]
});
Now seeing that this style sheet loaded into TinyMCE is generated based of the CMS’s active template. If I were to change the template I would also have to change the style code. Which will be come a major hassle in the future.
So anyone knows of a code patch to the style selector or plugin that will let me do this?
see below usage of content_css for multiple css files
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
**content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css']**
});
I know this is an old post, but here is what I do, in case someone else come looking.
style_formats: [
{
title: 'Button Styles', items: [
//{ title: 'Button Class (Must Select)', selector: 'a', classes: 'btn' },
{ title: 'Default Class', selector: 'a', classes: ['btn', 'btn-default'] },
{ title: 'Primary Class', selector: 'a', classes: ['btn', 'btn-primary'] },
{ title: 'Success Class', selector: 'a', classes: ['btn', 'btn-success'] },
{ title: 'Warning Class', selector: 'a', classes: ['btn', 'btn-warning'] },
{ title: 'Danger Class', selector: 'a', classes: ['btn', 'btn-danger'] },
{ title: 'Info Class', selector: 'a', classes: ['btn', 'btn-info'] },
{ title: 'Charcoal Class', selector: 'a', classes: ['btn', 'btn-charcoal'] },
{ title: 'Disabled Class', selector: 'a', classes: ['btn', 'btn disabled'] }]
}
]
As you can see, I wanted to include the 'btn' class with each of the Bootstrap button classes. All you have to do is wrap each class name in single-quotes, and separated each class name with a coma, then wrap all those class names in square brackets []
example: classes: ['btn','btn-default']
I hope this helps someone else.
Based on the name classes - being plural and also on other configuration setting example syntaxes, I would believe that it should look something like this:
tinyMCE.init({
style_formats : [
{title : 'Style1', classes : {'left_round_thumb_small','round_border_black'} },
{title : 'Style2', classes : {'center_round_thumb_small','round_border_blue'} },
]
});
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.