javascript - TinyMCE - 你如何使用 onClick 而不是链接？

Question

有没有办法改变 TimyMCE 的默认行为，这样当您插入链接时，它会呈现如下内容：

<span onclick="window.open('http://google.com', '_blank', 'location=yes');"></span>

代替

<a href="http://www.google.com" target="_blank" location="yes"></a>

理想情况下，我希望通过链接按钮完成此操作，但可以在提交时完成。

添加：这样做的原因（我知道这似乎是不好的做法）是为了能够移植到 PhoneGap（使用InAppBrowser插件），因为它不适合浏览器使用。

Answer 1

忽略这确实不是一个好的做法，我会假设你有一个有效的用例来想要做这样的黑魔法。

但在此之前，需要考虑一些事项：

1. 我建议您在 TinyMCE 中工作时将链接保留为链接。这样，您的用户将能够像往常一样插入和编辑它们。将它们更改为编辑器中的span元素实际上将消除在不编辑完整源代码的情况下编辑它们的能力。您可能应该将它们转换为编辑器之外span的元素。

2. 如果你是顽固的类型并且不关心#1 或你的用户，你应该注意默认的 TinyMCE 4 配置不允许onclick属性，所以你需要更新extended_valid_elements，否则它们将在清理过程中被删除过程。

3. 可能有更好的方法来做你想做的事情。正如@Vic 建议的那样，事件监听器可能是一个更好的选择。

不过，我会取笑你。下面是一个工作示例的过程概述。

概述

如果您正在使用 TinyMCE 3.x 进行开发，您将希望参与该onSaveContent活动。如果您使用的是 4.x，请使用saveContent事件。在这两种情况下，概念是相同的。

每当“保存”编辑器的内容时​​，都会触发此事件。如果 TinyMCE 作为表单的一部分提交，这会自动发生，但您也可以使用tinymce.triggerSave()它一次强制所有编辑器使用它。

因此，只需设置您的回调函数即可将所有链接替换为邪恶的span替代方案。您可以使用纯 JS 或 TinyMCE 的内置 DOM 实用程序（如果您已经熟悉它们，这可能只是一个好主意），但为了清楚起见（和理智），使用 jQuery 会更容易。

工作示例

TinyMCE 小提琴： http: //fiddle.tinymce.com/mAdaab/1

1. 此示例使用 TinyMCE 4
2. 打开浏览器的控制台以查看输出
3. TinyMCE加载后，按下Save按钮
4. 生成的 HTML 将出现在您的控制台中

随心所欲地使用它，但请记住，可能有更好的方法。

Answer 2

您提出的是一种非常糟糕的做法（例如不使用链接锚标记）实际上给您的链接一个id或类并使用javascript附加事件侦听器并在点击时防止默认行为获取href属性并使用它不会更容易你的window.open？