场景分析

移动端受限于屏幕小、事件等适配性问题,直接使用编辑器视图进行编辑体验并不理想,无法实现便捷输入。可以使用本方案在移动端实现文档编辑。

总体思路

移动端不使用编辑器视图,只加载编辑器内核用于文档操作。

1、隐藏编辑器Canvas
2、和桌面版一样使用相同接口操作编辑器
3、将编辑器带ID元素提取出来,通过前端表单控件进行编辑

实现方法

隐藏编辑器Canvas

启动时和桌面版一样,调用Init()、Run()来启动编辑器。可通过hideCanvas参数来配置隐藏Canvas
editorContainer可以任意指定

方式一:hideCanvas示例代码

var init_config={};
/*****************************/
init_config.hideCanvas = true;
/*****************************/
ThinkEditor.Init(init_config);
ThinkEditor.Run(editorContainer);

也可以通过Hide()接口来隐藏Canvas

方式二:Hide()示例代码

var init_config={};
ThinkEditor.Init(init_config);
ThinkEditor.Run(editorContainer);
/*****************************/
ThinkEditor.Hide();
/*****************************/

创建、解析文档

和有视图模式相同的方式,创建、解析文档

获取段落、元素文本

通过GetOutLine()得到文档大纲Json文件,提取需要编辑的元素内容。

将病历内容通过表单展示

前端修改完成后,同步到编辑器文档中

同步元素内容

ThinkEditor.SetElementContent("姓名", "张小北");

保存文档

和有Canvas视图时一样获取文档保存即可即可。

var dataBuffer = ThinkEditor.GetDoc(E_DOC_FORMAT.XML, E_DOC_TYPE.Entity);
文档更新时间: 2025-04-23 21:35   作者:admin