1. 编辑器添加自定义按钮

HTML：

<form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
</form>

JS：

现在创建自定义按钮，起名叫 "套用模板",对应的英文名是 meeting

[图片上传失败...(image-a73dc6-1645879653466)]

在下面的初始化代码中:

1. 需要在toolbar(工具栏) 添加meeting
2. 添加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'
                    },"*");