1. 編輯器添加自定義按鈕

HTML：

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

JS：

現(xiàn)在創(chuàng)建自定義按鈕，起名叫 "套用模板",對應的英文名是 meeting

[圖片上傳失敗...(image-a73dc6-1645879653466)]

在下面的初始化代碼中:

1. 需要在toolbar(工具欄) 添加meeting
2. 添加setup,定義一個匿名函數(shù)，在這里面主要做兩步操作：
   2.1 創(chuàng)建工具欄按鈕。
   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數(shù)據(jù)通信

打開浮動窗口后，點擊里面按鈕，加載數(shù)據(jù)插入到tinymce編輯中，添加下面的代碼實現(xiàn)通信

首先請求接口獲取會議模板里的內(nèi)容，通過window.parent.postMessage() 插入數(shù)據(jù)

<script type="text/javascript">

    //點擊按鈕，將模板內(nèi)容添加到編輯器中
    $(".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編輯器插入要選中的內(nèi)容
                    window.parent.postMessage({
                      mceAction: 'insertContent',
                      content:content
                    }, '*');

                    //添加成功后，關閉打開的Url Dialog
                    window.parent.postMessage({
                      mceAction:'close'
                    },"*");

                }else{
                    Dcat.error('這個模板還沒有設置內(nèi)容');
                }
                
            }
        })
    });
</script>

通信代碼主要是下面這兩行。

//向Tinymce編輯器插入要選中的內(nèi)容
                    window.parent.postMessage({
                      mceAction: 'insertContent',
                      content:content
                    }, '*');

                    //添加成功后，關閉打開的Url Dialog
                    window.parent.postMessage({
                      mceAction:'close'
                    },"*");