免费crm网站不用下载的软件,个人主页原型图,科技网络公司名字,一个网站开发的假设概述
语雀是一个非常优秀的文档和知识库工具#xff0c;其编辑器更是非常好用#xff0c;虽无开源版本#xff0c;但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。
实现效果 实现
参考语雀编辑器官方文档#xff0c;其实现需要引入以下文件其编辑器更是非常好用虽无开源版本但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。
实现效果 实现
参考语雀编辑器官方文档其实现需要引入以下文件
link relstylesheet typetext/css hrefhttps://gw.alipayobjects.com/render/p/yuyan_npm/alipay_lakex-doc/1.1.0-beta.1/umd/doc.css/
link relstylesheet typetext/css hrefhttps://unpkg.com/antd4.24.13/dist/antd.css/
script crossorigin srchttps://unpkg.com/react18/umd/react.production.min.js/script
script crossorigin srchttps://unpkg.com/react-dom18/umd/react-dom.production.min.js/script
script srchttps://gw.alipayobjects.com/render/p/yuyan_npm/alipay_lakex-doc/1.1.0-beta.1/umd/doc.umd.js/script1. 文档编辑
const { createOpenEditor, toolbarItems } window.Doc;
docEditor createOpenEditor(this.$refs.editor, {toolbar: {agentConfig: {default: {items: [toolbarItems.cardSelect,|,toolbarItems.undo,toolbarItems.redo,toolbarItems.formatPainter,toolbarItems.clearFormat,|,toolbarItems.style,toolbarItems.fontsize,toolbarItems.bold,toolbarItems.italic,toolbarItems.strikethrough,toolbarItems.underline,toolbarItems.mixedTextStyle,|,toolbarItems.color,toolbarItems.bgColor,|,toolbarItems.alignment,toolbarItems.unorderedList,toolbarItems.orderedList,toolbarItems.indent,toolbarItems.lineHeight,|,toolbarItems.taskList,toolbarItems.link,toolbarItems.quote,toolbarItems.hr,]},// table选区工具栏table: {items: [toolbarItems.cardSelect,|,toolbarItems.undo,toolbarItems.redo,toolbarItems.formatPainter,toolbarItems.clearFormat,|,toolbarItems.style,toolbarItems.fontsize,toolbarItems.bold,toolbarItems.italic,toolbarItems.strikethrough,toolbarItems.underline,toolbarItems.mixedTextStyle,|,toolbarItems.color,toolbarItems.bgColor,toolbarItems.tableCellBgColor,toolbarItems.tableBorderVisible,|,toolbarItems.alignment,toolbarItems.tableVerticalAlign,toolbarItems.tableMergeCell,|,toolbarItems.unorderedList,toolbarItems.orderedList,toolbarItems.indent,toolbarItems.lineHeight,|,toolbarItems.taskList,toolbarItems.link,toolbarItems.quote,toolbarItems.hr,],}}},image: {isCaptureImageURL:(url) {// return false表示需要转存会调用createUploadPromisereturn false;},// 配置上传接口,要返回一个promise对象createUploadPromise: (request) {const {type, data} request;if(type url) {return Promise.resolve({url: url,filename: 上传图片});} else if(type file) {return new Promise(resolve {let formData new FormData();formData.set(file, data);//这里使用封装的上传文件的接口upload(file/upload/img, formData).then(res {if(res.code 200) {const {fileName, url} res.dataresolve({url: url,filename: fileName});} else {ElMessage({message: 图片上传失败!,type: warning,})}})})}},}
});
window.docEditor docEditor// 获取文档内容
docEditor.getDocument(text/lake)// 设置文档内容
docEditor.setDocument(text/lake, docContent);2. 文章预览
const { createOpenViewer } window.Doc;
// 创建阅读器const viewer createOpenViewer(this.$refs.editor, {});
viewer.setDocument(text/lake, docContent);
