javascript TinyMCE - 自定义链接按钮 - “添加链接”很好，但找不到“编辑链接”和访问链接属性的任何文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5066953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TinyMCE - custom link button - "add link" is fine, but can't find any documentation for "edit link" and accessing link attributes
提问by LiverpoolsNumber9
I've added a custom button to TinyMCE which brings up a bespoke link-picker. When the user selects some text and clicks the button the dialog appears and when they've picked the url I'm using execCommand('insertHTML', false, "<a href... etc">)on the selection.
我向 TinyMCE 添加了一个自定义按钮，它会显示一个定制的链接选择器。当用户选择一些文本并单击按钮时，会出现对话框，当他们选择了我execCommand('insertHTML', false, "<a href... etc">)在选择中使用的 url 时。
This works fine - now, when the link has already been created, and the user wants to edit it, they click the link button again (when the cursor is inside the linked text as normal), but then here is the situation - I don't know how to access the already created link and it's attributes to then load up and populate the dialogue again!
这工作正常 - 现在，当链接已经创建，并且用户想要编辑它时，他们再次单击链接按钮（当光标正常位于链接文本内时），但情况是这样 - 我不不知道如何访问已经创建的链接，然后加载并再次填充对话框的属性！
Have search TinyMCE site, Stack, Google in general. Hoping for (and also slightly dreading) a simple answer - but if not, a complex one will be fine!!
一般搜索 TinyMCE 站点、Stack、Google。希望（也有点害怕）一个简单的答案 - 但如果没有，一个复杂的就可以了！！
If anybody knows the answer or can point me to it, I'd be extremely grateful. Thanks in advance, Rob
如果有人知道答案或可以指出我的答案，我将不胜感激。提前致谢，罗布
EDIT - bits of my code to explain need
编辑 - 我的一些代码来解释需要
In the TinyMCE init:
在 TinyMCE 初始化中：
setup: function (ed) {
ed.addButton("link", {
title: "Link",
onclick: function (evt) {
Intranet.TextEditor._loadUrlDialog(jQueryTextAreaObject, evt);
}
});
}
The function which is called above:
上面调用的函数：
_loadUrlDialog: function (jQueryTextAreaObject, clickEvent) {
var mce = $(jQueryTextAreaObject).tinymce();
var isSelected = mce.selection.getContent().length != 0 ? true : false;
if (isSelected) {
Intranet.UrlDialog.Fn.LoadDialog("", true, "", function (url, target, title) {
var theTarget = target == false ? "_self" : "_blank";
var link = "<a href=\"" + url + "\" target=\"" + theTarget + "\" title=\"" + title + "\">" + mce.selection.getContent() + "</a>";
mce.execCommand('insertHTML', false, link); // creates new link
});
}
else {
/// THIS IS THE MISSING BIT!
};
}
回答by Thariama
You have two ways of achieving this:
您有两种方法可以实现这一目标：
When pushing the button you check for the selection parent node. If the node is a link then you can get the link information from the html a-element. To populate your dialogue you will know what to do.
按下按钮时，您会检查选择的父节点。如果节点是一个链接，那么你可以从 html a-element 中获取链接信息。要填充您的对话，您将知道该怎么做。
The other option is to add a contextmenu on rightclick, which will provide the necessary functionalities.
另一种选择是在右键单击时添加上下文菜单，这将提供必要的功能。
Here is the plugin code for this (keep in mind that you will have to add "customcontextmenu" to the plugin-setting of your tinymce).
这是用于此的插件代码（请记住，您必须将“customcontextmenu”添加到您的 tinymce 的插件设置中）。
/**
* editor_plugin_src.js
*
* Plugin for contextmenus.
*/
(function() {
var Event = tinymce.dom.Event, each = tinymce.each, DOM = tinymce.DOM;
tinymce.PluginManager.requireLangPack('customcontextmenu');
/**
* This plugin a context menu to TinyMCE editor instances.
*
* @class tinymce.plugins.customcontextmenu
*/
tinymce.create('tinymce.plugins.customcontextmenu', {
/**
* Initializes the plugin, this will be executed after the plugin has been created.
* This call is done before the editor instance has finished it's initialization so use the onInit event
* of the editor instance to intercept that event.
*
* @method init
* @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
* @param {string} url Absolute URL to where the plugin is located.
*/
init : function(ed) {
var t = this, lastRng;
t.editor = ed;
// Registiere commands
ed.addCommand('edit_inline_element', function() {
//edit_inline_element(ed, ed.right_clicked_node); //ed.right_clicked_node is the actually clicked node
//call or do whatever you need here
});
// delete link
ed.addCommand('delete_inline_element', function() {
$(ed.right_clicked_node).replaceWith($(ed.right_clicked_node).html());
});
// assign the right clicked node (it is the evt.target)
ed.onClick.add(function(ed, evt) {
if (evt.button == 2) ed.right_clicked_node = evt.target;
});
/**
* This event gets fired when the context menu is shown.
*
* @event onContextMenu
* @param {tinymce.plugins.ContextMenu} sender Plugin instance sending the event.
* @param {tinymce.ui.DropMenu} menu Drop down menu to fill with more items if needed.
*/
t.onContextMenu = new tinymce.util.Dispatcher(this);
ed.onContextMenu.add(function(ed, e) {
if (!e.ctrlKey) {
// Restore the last selection since it was removed
if (lastRng)
ed.selection.setRng(lastRng);
var menu = t._getMenu(ed);
if ((typeof menu).toLowerCase() == 'object')
{
menu.showMenu(e.clientX, e.clientY);
Event.add(ed.getDoc(), 'click', function(e) {
hide(ed, e);
});
Event.cancel(e);
}
// sonst Standardmenu anzeigen
}
});
ed.onRemove.add(function() {
if (t._menu)
t._menu.removeAll();
});
function hide(ed, e) {
lastRng = null;
// Since the contextmenu event moves
// the selection we need to store it away
if (e && e.button == 2) {
lastRng = ed.selection.getRng();
return;
}
if (t._menu) {
t._menu.removeAll();
t._menu.destroy();
Event.remove(ed.getDoc(), 'click', hide);
}
};
ed.onMouseDown.add(hide);
ed.onKeyDown.add(hide);
},
_getMenu: function(ed){
var t = this, m = t._menu, se = ed.selection, col = se.isCollapsed(), el = se.getNode() || ed.getBody(), am, p1, p2;
if (m) {
m.removeAll();
m.destroy();
}
p1 = DOM.getPos(ed.getContentAreaContainer());
p2 = DOM.getPos(ed.getContainer());
m = ed.controlManager.createDropMenu('contextmenu', {
offset_x : p1.x + ed.getParam('contextmenu_offset_x', 0),
offset_y : p1.y + ed.getParam('contextmenu_offset_y', 0),
constrain : 1
});
t._menu = m;
if ((typeof ed.right_clicked_node) !== "undefined" && ed.right_clicked_node.nodeName.toLowerCase() == 'a' )
{
m.add({
title: $(ed.right_clicked_node).attr('title'),
});
m.addSeparator();
m.add({
title: 'Edit link',
icon: 'edit_inline_element',
cmd: 'edit_link'
});
m.add({
title: 'Delete link',
icon: 'delete_inline_element',
cmd: 'delete_link'
});
t.onContextMenu.dispatch(t, m, el, col);
return m;
}
else {
// kein Menu anzeigen
return 0;
}
}
});
// Register plugin
tinymce.PluginManager.add('customcontextmenu', tinymce.plugins.customcontextmenu);
})();
