TinyMCE很不错,但是我无法找到我需要的所有信息(可能)必须通过文档来开发自己的插件才能做到这一点。
基本上,我只是想移动一些现有的按钮,我将首先向您展示我的初始化:
tinymce.init({
selector: ".tinymce",
language: _locale,
height: 500,
width: "100%",
menubar: true,
removed_menuitems: "link, media, image, table",
image_advtab: false,
branding: false,
statusbar: false,
elementpath: false,
plugins: [
"autoresize",
"advlist autolink lists link image charmap print preview anchor textcolor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste code help"
],
toolbar: "insertmedia inserttable | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
content_css: [
"//fonts.googleapis.com/css?family=Lora:300,300i,400,400i",
// "//www.tinymce.com/css/codepen.min.css",
"/build/style.css"],
init_instance_callback: function (editor) {
editor.on("GetContent", function (e) {
e.content = e.content.replace(/(\.\.\/)+/g, "/");
});
},
setup: function(editor) {
tinymceEditor = editor;
editor.on("change", function () {
editor.save();
});
editor.addButton("insertmedia", {
type: "menubutton",
text: Translator.trans("Invoegen"),
icon: "insert",
menu: [
{
text: Translator.trans("Upload foto"),
tooltip: Translator.trans("Voeg een nieuwe foto toe (kan later opnieuw gebruikt worden)"),
icon: "upload",
onclick: function() {
dialogUploadPhoto.dialog( "open" );
}
},
{
text: Translator.trans("Web foto"),
tooltip: Translator.trans("Voeg een nieuwe foto toe uit een andere bron"),
icon: "image",
// cmd: "mceImage"
onclick: function() {
tinyMCE.execCommand("mceImage");
}
}, {
text: Translator.trans("Upload video"),
tooltip: Translator.trans("Voeg een nieuwe video toe (kan later opnieuw gebruikt worden)"),
icon: "upload",
onclick: function() {
dialogUploadVideo.dialog("open");
}
},
{
text: Translator.trans("Web video"),
tooltip: Translator.trans("Voeg een nieuwe video toe uit een andere bron"),
icon: "media",
onclick: function() {
tinyMCE.execCommand("mceMedia");
}
},
{text:"|"},
{
text: Translator.trans("Geüploade foto's"),
tooltip: Translator.trans("Foto's die je eerder hebt geüpload"),
icon: "image",
onclick: function() {
dialogSelectPhoto.dialog("open");
}
}, {
text: Translator.trans("Geüploade video's"),
tooltip: Translator.trans("Video's die je eerder hebt geüpload"),
icon: "media",
onclick: function() {
dialogSelectVideo.dialog("open");
}
},
{text:"|"},
{
text: Translator.trans("Tabel"),
type: "menubutton",
// title: "Table",
icon: "table",
items: "inserttable tableprops deletetable | cell row column"
},
{
text: Translator.trans("Link"),
tooltip: Translator.trans("Maak een link naar een andere website"),
icon: "link",
onclick: function() {
tinyMCE.execCommand("mceLink");
}
}, {
// "link", {
text: Translator.trans("Speciaal teken"),
tooltip: Translator.trans("Symbolen die je niet op het toetsenbord vindt"),
icon: "charmap",
onclick: function() {
tinyMCE.execCommand("mceShowCharmap");
}
}, {
text: Translator.trans("Anker"),
tooltip: Translator.trans("Een link maken naar een hoofdstuk / hoofding in dit tekstveld"),
icon: "anchor",
onclick: function() {
tinyMCE.execCommand("mceAnchor");
}
}
]
});
}
});
所以我的工具栏中有一个名为insertmedia的自定义按钮。 作为我想要实现的目标的代表,我补充说:
{
text: Translator.trans("Tabel"),
type: "menubutton",
// title: "Table",
icon: "table",
items: "inserttable tableprops deletetable | cell row column"
},
我知道items
不是自定义菜单按钮的有效属性,但我确实希望这些插件按钮显示在此处:
关于如何做到这一点的任何想法?