如何实现外部调用Tinymce工具栏的预览功能

[开发阿泽°]

各位大佬好，这是我遇到的一个问题，就是我这个单据保存了之后是不能对这个富文本编辑器里面的内容进行更改的，但是假设用到了视频，此时我需要看视频里面的内容，这个时候就有个问题，我没有办法去点击这个视频，我初步思路是我通过左上角这个预览按钮 来调用富文本工具栏上边的那个预览功能，这样进行预览的时候就可以自由点击视频 并且不会对内容进行更改，有没有大佬能够提供一个解题思路，让我能够实现这个功能。

 

[开发阿泽°]

问题解决方法：

1. 首先需要引入 tinymce.min.js tinymce.js plugin.js 三个配置文件
2. 需要配置两个属性
   automatic_uploads: true,
   images_upload_handler：function (blobInfo, success, failure) {

        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'Handers/CommonHandler.ashx?action=UpLoadImage_TinyMCE');
        xhr.onload = function () {
            var json;
            if (xhr.status === 403) {
              failure('HTTP Error: ' + xhr.status, { remove: true });
              return;
            }
            if (xhr.status !== 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            if (xhr.status < 200 || xhr.status >= 300) {
              failure('HTTP Error: ' + xhr.status);
              return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location !== 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success("../"+json.location);
        };
        xhr.onerror = function () {
            failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
          };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), '图片名称.png');
        xhr.send(formData);
    },
   

//代码示例

tinymce.init({
...
images_upload_handler: (blobInfo, succFun, failFun)=>{ ... }
automatic_uploads: true
plugins: "tpImportword"
toolbar: "tpImportword"
...
})
注：注意js引入路径
3.直接调用开发文档里面预览功能，或者直接在数据加载后自动调用