TinyMCE - 你如何使用onClick而不是<a href=""> for links?

Question

Is there a way to change the defalt behaviour of TimyMCE, so that when you insert a link, it renders something like this:

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

instead of

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

Ideally, I would like this to be done by the Link button, but it could be done onSubmit.

ADDED: The reason for doing this (as I know it seems like bad practice) is to be able to port to PhoneGap (using the 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的小提琴：​​

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

用它做什么，但要记住，有可能有更好的方法。

Answer 2

你提出的是一个非常糟糕的做法（因为在不使用链接的锚标记）不会更容易实际上给你的链接一个id或类和附加事件监听与JavaScript和点击防止默认behavour抓住href属性并使用你的window.open？