tinymce编辑器添加自定义按钮
1. 编辑器添加自定义按钮
HTML:
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
现在创建自定义按钮,起名叫 "套用模板",对应的英文名是 meeting
[图片上传失败...(image-a73dc6-1645879653466)]
在下面的初始化代码中:
需要在toolbar(工具栏) 添加meeting
添加setup,定义一个匿名函数,在这里面主要做两步操作:
2.1 创建工具栏按钮。
2.2 点击按钮后,通过url打开浮动窗口
tinymce.init({
selector:"#mytextarea",
menubar:false,
toolbar:['undo redo styleselect|link image bold|italic|italic|underline',
'code table | bullist numlist|meeting',
height:500,
plugins:'code,table,lists,advlist',
setup:function(editor){
editor.ui.registry.addButton('meeting',{
text:'套用模板',
icon:'accessibility-check',
onAction:function(){
editor.windowManager.openUrl({
title:"选择会议模板",
url:'https://www.163.com',
width:840,
height:300
onAction部分的代码起的作用是:点击自定义按钮后,打开一个窗口,其中url是需要自定义一个页面,打开后里面存放赢邦象的会议介绍模板。
onAction:function(){
editor.windowManager.openUrl({
title:"选择会议模板",
url:'https://www.163.com',
width:840,
height:300
会议介绍模板列表接口地址:
http://showdoc.simonxv.com/web/#/46?page_id=1245
[图片上传失败...(image-e5621e-1645879653466)]
2 新开窗口与tinymce数据通信
打开浮动窗口后,点击里面按钮,加载数据插入到tinymce编辑中,添加下面的代码实现通信
首先请求接口获取会议模板里的内容,通过window.parent.postMessage() 插入数据
<script type="text/javascript">
//点击按钮,将模板内容添加到编辑器中
$(".chooseMe").click(function(){
let id=$(this).attr("id");
$.ajax({
type:'POST',
url:'/admin/api/getIntroduce',
data:{id:id},
success:function(response){
if(response.status){
content=response.data;
//向Tinymce编辑器插入要选中的内容
window.parent.postMessage({
mceAction: 'insertContent',
content:content
}, '*');
//添加成功后,关闭打开的Url Dialog
window.parent.postMessage({
mceAction:'close'
},"*");
}else{
Dcat.error('这个模板还没有设置内容');
</script>
通信代码主要是下面这两行。
//向Tinymce编辑器插入要选中的内容
window.parent.postMessage({
mceAction: 'insertContent',
content:content
}, '*');
//添加成功后,关闭打开的Url Dialog
window.parent.postMessage({
mceAction:'close'
},"*");