[英]Tinymce custom plugin
一位客戶要求我制作一個插件來插入電話鏈接,我知道這可以通過鏈接插件來完成,但他希望有一個專門設計來實現此目的的插件。 我已經有了帶有彈出窗口的插件,您可以在其中插入所需的數據,這是代碼,我要添加的功能與鏈接插件相同,因此當用戶單擊鏈接的文本時,內容可以是在我的插件的窗口管理器中進行了編輯。
這是我到目前為止的代碼:
tinymce.PluginManager.add('phonelink', function(editor, url) {
// Add a button that opens a window
tinymce.DOM.loadCSS(url + '/css/phonelink.css');
editor.addButton('phonelink', {
text: false,
icon: 'phonelink',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Enlace teléfono',
body: [
{type: 'textbox', name: 'phone', label: 'Teléfono'},
{type: 'textbox', name: 'showtext', label: 'Texto a mostrar'},
{type: 'textbox', name: 'title', label: 'Título'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('phonelink', {
text: 'Teléfono',
context: 'tools',
onclick: function() {
// Open window with a specific url
editor.windowManager.open({
title: 'Enlace teléfono',
body: [
{type: 'textbox', name: 'phone', label: 'Teléfono'},
{type: 'textbox', name: 'showtext', label: 'Texto a mostrar'},
{type: 'textbox', name: 'title', label: 'Título'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>');
}
});
}
});
});
我終於解決了它,如果有人感興趣,這就是我的做法:
tinymce.PluginManager.add('phonelink', function(editor, url) {
// Add a button that opens a window
var linkText = "";
var linkTitle = "";
var link = "";
tinymce.DOM.loadCSS(url + '/css/phonelink.css');
editor.addButton('phonelink', {
text: false,
icon: 'phonelink',
onpostrender: updateOnSelect,
onclick: onClickPhoneButton
});
// Adds a menu item to the tools menu
editor.addMenuItem('phonelink', {
text: 'Teléfono',
context: 'tools',
onclick: onClickPhoneButton,
onpostrender: updateOnSelect,
});
function onClickPhoneButton(){
editor.windowManager.open({
title: 'Enlace teléfono',
body: [
{type: 'textbox', name: 'phone', label: 'Teléfono', value: link},
{type: 'textbox', name: 'showtext', label: 'Texto a mostrar', value: linkText},
{type: 'textbox', name: 'title', label: 'Título', value: linkTitle}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
var hrefLink = '<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>';
if(link !== ''){
editor.setContent(hrefLink);
}else{
editor.insertContent(hrefLink);
}
}
});
}
function updateOnSelect() {
var btn = this;
editor.on('NodeChange', function (e) {
var node = editor.selection.getNode();
var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
btn.active(isTelLink);
if(isTelLink){
link = node.href;
link = link.replace("tel:+34", "");
linkTitle = node.title;
linkText = node.text;
}
});
}
});
也許這會有所幫助https://www.tinymce.com/docs-3x/api/dom/class_tinymce.dom.Selection.html/
為您的元素添加一些類,例如.phonelink。 然后使用editor.selection.getNode();
您可以獲取所選元素的內容,如果它具有所需的類,則將其內容粘貼到彈出窗體中。 提交功能中的相同更改。
為了獲得更好的UI體驗,您可以在按鈕上添加onclick工具提示
editor.addContextToolbar(
'.phonelink',
'phonelink'
);
希望對您有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.