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?
Related
I have what I want working in tinyMCE v4.x, but am really styruggling to update the code to work with the latest version (6.x) of this editor.
Basically, my custom button opens a new (popup) window (passing various arguments) in which the user can do various things which produces some HTML, and this is then pasted back into the tinyMCE editor window (at the current insertion point) via editor.insertContent([whatever]);
Here's my v4 code to add the button to the editor toolbar:
editor.addButton('myButton', {
text: 'XYZ',
tooltip: 'Do something',
icon: false,
onclick: function () {
editor.windowManager.open({
title: 'XYZ',
url: 'mypopuppage.html',
width: 800,
height: 600
}, {
arg0: '0',
arg1: '1',
arg2: editor.selection.getContent({ format: 'html' }),
arg3: '',
arg4: ''
});
}
});
});
As I say, this is fine - it works. For v6 I've tried, but can't get it to work. I have not managed to find any code examples online that do anything similar for tinyMCE v6.x, though I'm sure there must be some... this is my effort, but clearly requires more, as it doesn;t work - the button shows, but nothing happens when I click it:
selector: "textarea#txtA",
menubar: false,
statusbar: false,
plugins: "myButton",
setup: (editor) => {
editor.ui.registry.addButton('myButton', {
text: 'XYZ',
onAction: (_) => {
editor.windowManager.open({
title: 'XYZ',
url: 'mypopuppage.html',
width: 800,
height: 600
}, {
arg0: '0',
arg1: '1',
arg2: editor.selection.getContent({ format: 'html' }),
arg3: '',
arg4: ''
});
}
});
},
toolbar1: "myButton"
});
Any help gratefully received...
[edit] OK - getting there; silly me: I should use
editor.windowManager.openUrl({
to open the dialog... now I just have to figure out how to send the HTML back to the editor...
..not sure I'm passing my arguments corectly for this version of tinyMCE... or not reading them correctly on the popup page. In v4x I could use
var args = top.tinymce.activeEditor.windowManager.getParams();
but this doesn't seem to work with v6x... I can use a workaorund of passing the arguments as parameters in the URL I call, but I suspect there is a more robust way of doing it as per v4x - damned if I can find it though... that asied, I'm just about there now :)
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.
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
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'} }
],