TinyMCE 自定义链接按钮/命令(使用 jQuery)

发布于 2024-10-17 09:25:29 字数 885 浏览 12 评论 0原文

我有一个 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();

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

我需要做的是将选择内容包装在 标记中,这样我就可以使用该 节点,但不能了解如何执行此操作。我已经浏览了 API,但找不到我要找的东西。但一定有什么东西,因为 TinyMCE 必须在内部使用它。 (我也尝试过研究 TinyMCE 源代码,但它超出了我的范围!)

有人有任何想法吗?

谢谢

I have a TinyMCE editor with its default toolbar hidden, and have created my own to replace it (simplified with office2007 style css previews).

I'm having an issue with creating a link via code (I load my own jQuery UI window with a list of pages generated by the cms, this returns a url to my code).

How I'm doing it is as follows:

Adding the following to TinyMCE setup config:

execcommand_callback : 'NEWCMS.editor.util.override'

So any command performed gets run through that function before doing the default behaviour.

In that function I check if its an 'mceLink' event (got my custom toolbar sending commands correctly, so not an issue there). When I get one, I display a window which returns the url the user has selected. It's at this point I have an issue.

I get the selected node using

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

but its returning the node of the paragraph, as expected.

What I need to do is wrap the selection in <a> tags so I can then use that <a> node, but cannot find out how to do this. I've gone through the API but can't find what I'm looking for. There must be something though, as TinyMCE must use it internally. (I've also tried looking into the TinyMCE source but its beyond me!)

Anyone got any ideas?

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

零時差 2024-10-24 09:25:29

您可以将选定的内容包装到 a 标签中并将其写回编辑器:

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)

You could get the selected content wrap it into an a-tag and write it back to the editor:

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)
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文