Tinymce 自定义模版内容里面怎么写点击事件
时间: 2024-09-20 17:11:22 浏览: 130
TinyMCE是一个流行的富文本编辑器插件,如果你想要自定义模板并在其中添加点击事件,通常会在HTML标记中结合JavaScript来实现。以下是步骤:
1. 首先,在TinyMCE的模板里,你可以创建一个`<a>`标签作为点击目标,比如:
```html
<a href="#" class="custom-link" data-url="http://example.com">点击这里</a>
```
这里的`href="#"`用于临时链接,真正的跳转地址保存在`data-url`属性中。
2. 然后,为这个`<a>`元素添加一个点击事件处理函数,可以使用TinyMCE的`setup`回调或直接在HTML上绑定事件处理程序,如:
```javascript
tinymce.init({
selector: 'textarea', // 选择需要编辑的内容区域
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak spellchecker', /* ... */],
toolbar: 'your_toolbar_buttons', // 根据需求配置工具栏
setup: function(editor) {
editor.on('NodeChange', function(e) {
if (editor.selection.getNode().nodeName.toLowerCase() === 'a') {
var url = editor.dom.getAttrib(e.node, 'data-url');
// 绑定点击事件,可以根据url跳转或其他操作
e.node.onclick = function(e) {
e.preventDefault(); // 阻止默认行为(防止页面跳转)
window.open(url); // 打开新窗口或者执行其他逻辑
};
}
});
},
});
```
请注意,这只是一个基本示例,实际应用可能需要根据TinyMCE的版本、具体的UI设计以及用户交互需求来调整。在TinyMCE的API文档中查找更多信息会更有帮助。
阅读全文