I try to create a custom Context Menu in TinyMCE.
contextmenu:"cut copy paste | alignment"
and the "alignment" be like
tinymce.PluginManager.add('context_menu',function(editor) {
editor.addMenuItem('alignment', {
text: 'Alignment',
menu:[{text: 'Left', icon: 'alignleft', cmd: 'alignleft'},
{text: 'Center', icon: 'aligncenter', cmd: 'aligncenter'},
{text: 'Right', icon: 'alignright', cmd: 'alignright'},
{text: 'Justify', icon: 'alignjustify', cmd: 'alignjustify'}],
context:'alignment'
});
});
The code give the context menu with align options but when i click on align left/right/justify nothing seems working.The text is not aligning as per the command. I tried "cmd" and "format" options but nothing seems working.
I found out the answer from TinyMCE documentation. Here we go, we just have to fire an onclick event with editor execCommand instead of cmd and the commands will be
JustifyLeft, JustifyCenter, JustifyRight, JustifyFull
onclick: function () {
editor.execCommand('JustifyLeft');
}
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 :)
Trying to add class to only selected paragraphs in WordPress Editor.
Added a button called 'Add stylish '<li>' where there is an item called 'Includes'. So my need is to add class to the selected '<p>' when 'Includes' is pressed. Any help will be really grateful. Thanks!
(function() {
tinymce.PluginManager.add('sanjog_custom_tinymce_button', function( editor, url ) {
editor.addButton( 'sanjog_custom_tinymce_button', {
title: 'Add stylish <li>',
type: 'menubutton',
fixedWidth: true,
icon: 'icon dashicons-menu',
menu: [
{
text: 'Includes',
onclick: function() {
tinyMCE.activeEditor.focus();
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.select('p'),'test');
}
},
]
});
});
})();
I'm looking at this example w.r.t creating tinyMCE plugin. What I want to do is to open
a popup, and the content inside the popup is specified programmatically, without having to load a physical page at certain url:
Add an input element of type=file in tinymce container
Basically the author solved the issue about a plugin he was trying to create. I'm trying the same code but the popup is completely empty for me, no errors, any suggestions? Where can I find info about the "body" parameter when calling "windowManager.open", like:
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [{
type: 'textbox',
name: 'code',
label: 'Video code'
}],
...
Try giving the textbox a size:
// Open window
editor.windowManager.open(
{title: 'Example plugin',
body: [
{ type: 'textbox',
size: 40,
name: 'code',
label: 'Video code'
}
],
.....
I'm using tinymce a trying to extend a plugin to show a dialog with specific layout:
editor.windowManager.open({
title: 'Title of my dialog',
body: [
{type: 'label', text: 'my label'},
{ name:'my_input', type: 'textbox'},
// { type: 'text', html:'some content with <b>bold</b> if posilbe!'},
// { type: 'html', value:'<div>with custom formating</div>'}
]
}
I checked the the documentation for tinymce.ui several times but can find a way to add html or text component in the constructor of the dialog (like the comment rows in the example).
I know there is a option using a ready html template for the dialog.. but there are also a lot of events and triggers so using the constructor and .ui components is more suitable for my case.
I used to use JQuery UI dialog for this but ran into some issues after TinyMCE 4.0.
I have a TinyMCE plugin that lets people fetch the plain text version of their post in the WordPress editor. Then I show them that text using this:
var plain_block = {
type: 'container',
html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>'
};
ed.windowManager.open({
title: "Plain Text of This Post",
spacing: 10,
padding: 10,
items: [
plain_block
],
buttons: [
{
text: "Close",
onclick: function() { ed.windowManager.close();}
}
]
});
End result is a pretty plain-jane dialog box with some HTML and a Close button
I am trying to remove the menu and status bars from TinyMCE 4 because I want to setup a very basic editor. Is this possible?
The documentation for TinyMCE 3 does not seem to be relevant and I cannot find anything for version 4.
I looked at the source and it was fairly obvious:
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
This removes both.
You can also customise what parts of the default menu bar are visible by specifying a string of enabled menus - e.g. menubar: 'file edit'
You can define your own menus like this:
menu : {
test: {title: 'Test Menu', items: 'newdocument'}
},
menubar: 'test'
If you want to remove entire Menu bar from top
tinymce.init({
menubar: false,
});
But if you want Custom menubar with some submenu
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'spellchecker code'}
}
});
see TinyMCE for more help.
So, It is clearly metioned in their docs that to make the values to false.
tinymce.init({
menubar: false,
branding: false,
statusbar: false,
})
In the latest update to v5
You can display menubar as such
tinymce.init({
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall searchreplace' },
insert: { title: 'Insert', items: 'image link charmap pagebreak' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
},
menubar: 'edit insert format table',
});
see https://www.tiny.cloud/docs/ for more details
If you want a completely clean text box, you could disable all the bars, including de "toolbar":
tinymce.init({
selector:'textarea',
branding: false,
menubar:false,
statusbar: false,
toolbar: false,
});
In the community edition I think you are not allowed to hide the statusbar (Powered by Tiny) branding part.
https://www.tiny.cloud/docs-4x/configure/editor-appearance/#branding