TinyMCE 自定义链接按钮/命令（使用 jQuery）答案

【问题标题】：TinyMCE Custom Link button/command (with jQuery)TinyMCE 自定义链接按钮/命令（使用 jQuery）
【发布时间】：2011-02-11 17:08:49
【问题描述】：

我有一个隐藏默认工具栏的 TinyMCE 编辑器，并创建了自己的编辑器来替换它（使用 office2007 样式 css 预览进行了简化）。

我在通过代码创建链接时遇到问题（我加载了我自己的 jQuery UI 窗口，其中包含由 cms 生成的页面列表，这会返回一个指向我的代码的 url）。

我的做法如下：

将以下内容添加到 TinyMCE 设置配置中：

execcommand_callback : 'NEWCMS.editor.util.override'

因此，在执行默认行为之前，执行的任何命令都会通过该函数运行。

在那个函数中，我检查它是否是一个“mceLink”事件（让我的自定义工具栏正确发送命令，所以那里不是问题）。当我得到一个时，我会显示一个返回用户选择的 url 的窗口。 此时我有一个问题。

我使用

获取所选节点

var inst = $('#jbcms_editor_textarea').tinymce();
var selectedNode = inst.selection.getNode();

但它返回了段落的节点，正如预期的那样。

我需要做的是将选择包装在<a> 标签中，这样我就可以使用该<a> 节点，但不知道如何执行此操作。我已经浏览了 API，但找不到我要找的东西。不过肯定有一些东西，因为 TinyMCE 必须在内部使用它。（我也尝试过研究 TinyMCE 的源代码，但它超出了我的范围！）

有人有什么想法吗？

谢谢

【问题讨论】：

您是否考虑过使用 mceInsertLink 命令将链接添加到当前选择？

标签： jquery tinymce selection textselection execcommand

【解决方案1】：

您可以将所选内容包装成一个 a-tag 并将其写回编辑器：

var inst = $('#jbcms_editor_textarea').tinymce();
var content = inst.selection.getContent();
inst.execCommand('insertHTML',false, '<a>'+content+'</a>'); #you may add attributes here too (like href)

【讨论】：

很高兴能够提供帮助。 brett 发出的命令可能会产生另一种解决方案。