@ctoweb/plugin-import-file v3.5.3

@ctoweb/plugin-import-file

文档导入

安装

$ yarn add @ctoweb/plugin-import-file

添加到引擎

import Engine, { EngineInterface } from '@ctoweb/engine';
import ImportFile from '@ctoweb/plugin-import-file';

new Engine(...,{ plugins:[ ImportFile] })

ImportFile 插件主要功能：选择/拖拽 word 文档、md 文件、.wk 文件，具体处理业务代码控制即可

ImportFile 可选项

uploader word 文件上传之后解析，业务代码处理即可 fileRender md、wk 文件直接读取内容赋值，

###业务代码逻辑

uploader(file) =>{
     ...解析word，转为html
     ...调用setHml方法赋值编辑器即可
};
fileRender()=>{
     var reader = new FileReader();
            let txt = getExtensionName(file);
            reader.onload = function (e) {
                var readAsText = reader.result;
                if (txt.toLowerCase() === ".wk") {
                    engineInstance.setValue("<div></div>");
                    engineInstance.setHtml(`${readAsText}`);
                }

                if (
                    txt.toLowerCase() === "md" &&
                    typeof readAsText == "string"
                ) {
                    //(1)方案1
                    var node = $(document.createTextNode(readAsText));
                    node.text(
                        node.text().replace(/[<]/g, function (c: any) {
                            return {
                                "<": "&lt;",
                            }[c];
                        })
                    );
                    engineInstance.trigger("paste:markdown-before", node);
                    engineInstance.trigger("paste:markdown", node);
                    engineInstance.trigger("paste:markdown-after", node);
                    node.text(node.text().replace(/((\r|\n)+)/g, "<br>"));
                    node.get<Text>()?.normalize();
                    engineInstance.setHtml(node.text());
                  //方案（2）
                 engineInstance.setMarkdown(readAsText);
                }
                document.getElementById("ctoinputfile")?.remove();
                message.success("导入成功");
            };
            reader.readAsText(file);
}

命令

ImportFile 插件命令

弹出文件选择框，并执行上传

可选参数 1：传入文件列表，将上传这些文件。传入图片地址，插入图片，如果为第三方图片就执行上传。否则弹出文件选择框并，选择文件后执行上传

//方法签名
async execute(files?: Array<File> | string | MouseEvent):void
//执行命令
engine.command.execute(Import.pluginName);