我有一个内联tinyMCE编辑器,HTML文本可能包含超链接。如果用户单击超链接,我希望他们转到该URL。如果他们点击其他地方,我想进入编辑模式。
HTML:
<div id="tinymce">
<p>User should be able to <a id="mylink" href="http://google.com">navigate to a link</a> and also edit the text by clicking outside the link.</p>
</div>
脚本:
tinymce.init({
selector: '#tinymce',
inline: true
});
$('#mylink').on('click', function(e) {
// This never fires
console.log('Link clicked...');
});
jsfiddle:http://jsfiddle.net/rdog33/uLhdq447/
正如你所看到的,我有一个想法,挂接到超链接的点击事件,然后用window.location.href手动发送用户,但该事件不会触发。如果我取消注释tinymce初始化,它确实启动,所以很明显tinymce以某种方式进行了干扰。
有什么想法吗?
Thariama的答案几乎是正确的-谢谢你让我走上正轨。以下是我的最终代码:
tinymce.init({
selector: '#tinymce',
inline: true,
setup: function(editor){
editor.on('init', function() {
$(editor.getBody()).on('click', 'a[href]', function(e) {
window.location.href = $(e.currentTarget).attr('href');
});
}
});
- 修复了"editor"被用作参数两次的语法错误
- 更改了事件处理以处理所有超链接,即使内容被用户替换
- 已将导航添加到超链接
这里的正确方法是使用tinymce参数setup
,并在编辑器就绪时向链接元素添加一个点击处理程序(使用init
事件)。
tinymce.init({
selector: '#tinymce',
inline: true,
setup: function(editor){
editor.on('init', function(editor){
$(editor.getBody()).find('#mylink').on('click', function(e) {
// This never fires
console.log('Link clicked...');
});
});
}
});