Using TinyMCE, is it possible to add toolbar buttons or shortcuts for <code> and <pre> formatting (so that they work in the same way as <b>, <i> etc)?
Having to go through 4 clicks to get to code (Format -> Formats -> Inline -> Code) and another 4 clicks to get to pre (Format -> Formats -> Blocks -> Pre) is a massive pain.
Adding the keyword code to the list of toolbar buttons or even to the Format menu results in the source code button.
On the TinyMCE initialization:
tinymce.init({
selector: 'textarea',
height: 500,
toolbar: 'codeSC',
[...]
setup: function (editor) {
editor.addButton('codeSC', {
text: '<code>',
icon: false,
onclick: function () {
editor.insertContent('<code>Text inside code</code>');
}
});
}
});
codeSC = codeShortCut
Related
I am trying to manipulate the html content of text that is selected in the editor. tinymce.activeEditor.getContent({format: 'html'}); grabs all of the html content in the editor which is great but I want the html of selected/highlighted text. I was under the impression that using tinymce.activeEditor.selection.getContent({format: 'html'}); would achieve this but it only returns html if all of the text in the editor is selected.
Here is my code:
setup: function (ed) {
ed.addButton('customFormatSelect', {
type: 'menubutton',
text: 'Formats',
icon: false,
menu: [{
text: 'Get HTML',
icon: false,
onselect: function() {
alert(tinymce.activeEditor.selection.getContent({format: 'html'}));
}
}]
});
}
I have tried using onclick instead of onselect and still get the same result.
Here are some screenshots of the issue:
Here is me selecting the text I want the HTML from and clicking my 'Get HTML' button:
Image 1
Here is the alert that I get:
Image 2
How can I add style (etc. padding-left: 10px;) or css class to an element over the custom Button and custom Context toolbar in TinyMCE 5?
This is what I've came so far:
editor.ui.registry.addButton('addstyle', {
icon: 'plus',
tooltip: 'Align image left',
onAction:
});
editor.ui.registry.addContextToolbar('imagealignment', {
predicate: function (node: any) {
return node.nodeName.toLowerCase() === 'img'
},
items: 'addstyle',
scope: 'node',
position: 'node'
});
I am missing what to write on onAction?
You need to write on the plugin source file for that particular plugin
I'd like it to simply be labeled "Font" as this is more useful to my non technical users. I can't seem to find a way to do this. Using version 4.x
you can change it in the tinymce.min.js file. just search for the text "Font Family" and you will see where you can change it.
You can do this by changing the default value in tinymce.min.js file. Just search for the code part beginning with:
{type:"listbox",text:"Font Family",tooltip:"Font Family",values:i,
...
Then put your desired label (for example "Font") inside the text:"". After change it should be look like :
{type:"listbox",text:"Font",tooltip:"Font Family",values:i,.
Result:
If you want to do this programmatically, for example create a button that will change label on click you can add this code when initializing tinyMCE:
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
toolbar1: 'fontselect fontsizeselect mybutton',
//...
// extra coding can go here
//...
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
var fontlabel = "Font";
document.getElementsByTagName("button")[4].firstChild.innerText = fontlabel;
// getElementsByTagName is an array, so the index changes belonging to
// position of your "FontFamily" dropdown. In my example it' 6th.
}
});
}
});
</script>
Before:
After:
Is it possible to add new menu items in file menu of tinymce for cutomization?
I have found the solution to edit or disable the file menu. i.e
tinymce.init({
selector: "textarea",
menubar: "edit format"
});
Disable menubar:
tinymce.init({
selector: "textarea",
menubar: false
});
But no way to cutomize hat file menu
Any Idea?
Possible duplicate: Is it possible to have custom Functions and commands in the TinyMCE4 Menubar?
// Adds a custom menu item to the editor that inserts contents when clicked
// The context option allows you to add the menu item to an existing default menu
tinymce.init({
...
setup: function(ed) {
ed.addMenuItem('example', {
title: 'My menu item',
context: 'tools',
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}
});
How do I remove a button from the TinyMCE toolbar?
Do I directly edit the tiny_mce.js file? If so, where? Do I edit my theme's editor_template.js file?
Any instruction or hints would be appreciated.
You can define exactly what you want on the toolbar with the advanced theme and you wind up just specifying a list of buttons. See http://wiki.moxiecode.com/index.php/TinyMCE:Configuration for the configuration reference or the examples at http://tinymce.moxiecode.com/examples/full.php
In case you need to remove button dynamically, you can use following technique:
tinymce.init({
selector: "textarea",
toolbar: "custom",
formats: {custom: {inline: "span", styles: {color: "red"}}},
setup: function(editor){
editor.addCustomButton = function () {
if(this.customButton){
this.customButton.show();
} else {
this.addButton("custom", {
onpostrender: function() {
editor.customButton = this; //saving button reference
}
});
}
};
editor.removeCustomButton = function () { this.customButton.hide(); };
}
});
Now you can call editor's methods addCustomButton and removeCustomButton from wherever you need.