我要评论概述
语雀是一个非常优秀的文档和知识库工具，其编辑器更是非常好用，虽无开源版本，但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。
实现效果
实现
参考语雀编辑器官方文档，其实现需要引入以下文件：
<link rel="stylesheet" type="text/css" href="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.1.0-beta.1/umd/doc.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="https://unpkg.com/antd@4.24.13/dist/antd.css" rel="external nofollow" /> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.1.0-beta.1/umd/doc.umd.js"></script>
1. 文档编辑
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表示需要转存，会调用createuploadpromise
return 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.data
resolve({
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);到此这篇关于基于语雀编辑器的在线文档编辑与查看的文章就介绍到这了,更多相关语雀编辑器内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论