TinyMCE 富文本编辑器实现world导入

官方教程：http://tinymce.ax-z.cn/demos/demo-classic.php
官网：https://tinymce-plugin.github.io/introduction.html
使用版本 5.10.7
本教程插件下载地址

效果图

下载插件包

html代码

<textarea class="tinymce" id="tinymce" name="${filed.filedName!}" style="height:650px;max-height:750px;" >${(has(content)?content[filed.filedName]:filed.filedValue),xss='escape'}</textarea>

引入js

 <script src="https://unpkg.com/tinymce@5.10.7/tinymce.js"></script>
<script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>
<script src="https://unpkg.com/tinymce-plugin/plugins/tpImportword/plugin.min.js"></script>

引入本地js

 <script src="${ctxPath}/static/tinymce/tinymce.min.js"></script>
 <script src="${ctxPath}/static/tinymce/themes/silver/theme.min.js"></script>
 <script src="${ctxPath}/static/tinymce/langs/zh_CN.js"></script>
 <script src="${ctxPath}/static/tinymce/plugins/tpImportword/plugin.min.js"></script>

<script type="text/javascript">
    tinymce.remove('.tinymce');

    tinymce.init({
        selector: 'textarea.tinymce',
        language: 'zh_CN',
        skeletonScreen: true,
        plugins: 'code tpImportword autoresize preview table image imagetools print preview searchreplace autolink directionality visualblocks visualchars fullscreen link media template code codesample charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
        toolbar: 'code tpImportword preview table image undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \\\n' +
            'styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \\\n' +
            'media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
        automatic_uploads: true,
        relative_urls: false,
        remove_script_host: false,
        convert_urls: true,
        images_upload_handler: (blobInfo, succFun, failure)=>{
            var xhr, formData;
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', '${ctxPath}/upload');
            xhr.onload = function() {
                console.log("xhr",xhr)
                console.log("xhr.responseText",xhr.responseText)
                var json;
                if (xhr.status < 200 || xhr.status >= 300) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                if (!json || typeof json.filename != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                succFun(json.filename);
            };
            formData = new FormData();
            formData.append('file', blobInfo.blob());
            xhr.send(formData);
        }
    });

</script>

这段代码是将导入world中的图片转换路径转换为url保存时带有IP和端口。

  relative_urls: false,
  remove_script_host: false,
  convert_urls: true,

这段代码是将图片进行上传到文件服务器，并返回访问url。
默认是 base64进行保存。

 images_upload_handler: (blobInfo, succFun, failure)=>{
            var xhr, formData;
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', '${ctxPath}/upload');
            xhr.onload = function() {
                console.log("xhr",xhr)
                console.log("xhr.responseText",xhr.responseText)
                var json;
                if (xhr.status < 200 || xhr.status >= 300) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                if (!json || typeof json.filename != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                succFun(json.filename);
            };
            formData = new FormData();
            formData.append('file', blobInfo.blob());
            xhr.send(formData);
        }