TinyMCE-如何使用onClick代替<a href=“”>鏈接？</a>

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嗎？