如何给TinyMCE上传图片后点击图片后出现的工具栏新增一个按钮,请列出详细代码
时间: 2024-05-14 20:16:07 浏览: 12
要给TinyMCE上传图片后点击图片后出现的工具栏新增一个按钮,需要进行以下几个步骤:
1. 定义一个新的插件,用于添加新按钮
```
tinymce.PluginManager.add('custom_button', function(editor, url) {
// Add a button that inserts a span element
editor.addButton('custom_button', {
text: 'Custom Button',
onclick: function() {
editor.insertContent('<span class="custom-span">Custom content</span>');
}
});
});
```
2. 在初始化TinyMCE时,将新插件添加到插件列表中
```
tinymce.init({
selector: '#mytextarea',
plugins: 'custom_button',
toolbar: 'custom_button'
});
```
3. 添加CSS样式,使新按钮显示出来
```
.mce-i-custom_button:before {
content: 'Custom Button';
}
```
其中,`custom_button`是自定义的插件名称,可以根据实际情况修改。`custom-span`是自定义的span元素的class名称,可以根据实际情况修改。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)