场景分析
移动端受限于屏幕小、事件等适配性问题,直接使用编辑器视图进行编辑体验并不理想,无法实现便捷输入。可以使用本方案在移动端实现文档编辑。
总体思路
移动端不使用编辑器视图,只加载编辑器内核用于文档操作。
1、隐藏编辑器Canvas
2、和桌面版一样使用相同接口操作编辑器
3、将编辑器带ID元素提取出来,通过前端表单控件进行编辑
实现方法
隐藏编辑器Canvas
启动时和桌面版一样,调用Init()、Run()来启动编辑器。可通过hideCanvas
参数来配置隐藏CanvaseditorContainer可以任意指定
方式一: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