基于语雀编辑器的在线文档编辑与查看

概述

语雀是一个非常优秀的文档和知识库工具,其编辑器更是非常好用,虽无开源版本,但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。

实现效果

image.png

image.png

实现

参考语雀编辑器官方文档,其实现需要引入以下文件:

<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"/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/antd@4.24.13/dist/antd.css"/>
<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表示需要转存,会调用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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Ptyhon】关于自定义对象的Json序列化和反序列化

背景 最近使用Ptyon爬虫数据时&#xff0c;遇到对象无法转换为JSON序列化对象问题TypeError: Object of type Main is not JSON serializable 意思&#xff1a; 就是对象不能转换为JSON序列化对象 原因&#xff1a; 是对象没有自定义实现转换为JSON序列化对象的方法没有。 实…

centos的环境配置

YUM仓库配置 安装阿里云的base源与EPEL源 仓库和常用命令 rm -f /etc/yum.repos.d/*.repo curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum c…

计算机语言知识点梳理

变量大小写区分 不区分大小 htmlcsssql 区分大小写 javajavascriptpythontypescriptc 弱类型语言和强类型语言 强类型语言 强类型语言也称为强类型定义语言。是一种总是强制类型定义的语言&#xff0c;要求变量的使用要严格符合定义&#xff0c;所有变量都必须先定义后使用…

Google Earth Engine 的缺点和限制

随着 Google Earth Engine 在地球科学和数据计算领域越来越流行&#xff0c;网上有很多介绍Google Earth Engine 的文章及 Google Earth Engine的追随者。Google Earth Engine确实是一款伟大的产品&#xff0c;我们应该为其点赞。但由于已经有太多人在热捧了&#xff0c;我这里…

数据库设计:防止MySQL字段名与关键字相撞,保护数据完整性!

MySQL是一款广泛应用的关系型数据库管理系统&#xff0c;对于数据库设计而言&#xff0c;字段名的选择是至关重要的一环。不小心选择了和MySQL关键字相同的字段名可能导致严重的数据完整性问题。下面将深入探讨如何防止MySQL字段名与关键字相撞&#xff0c;以保护数据的完整性。…

应用程序分类与相关基本概念介绍

0、引言 在从事软件开发的过程中&#xff0c;由于笔者并不是计算机专业的同学&#xff0c;所以时常会对一些概念感到困惑。比如&#xff1a; 前些年很火的前端和后端是什么意思&#xff1f;什么是 GUI&#xff1f;什么是 CLI&#xff1f;计算机的应用程序分为哪些种类&#x…

报错: “Data is Null. This method or property cannot be called,解决方法

在进行导入的时候报错 System.Data.SqlTypes.SqlNullValueException: "Data is Null. This method or property cannot be called on Null values."是一个在使用DataReader.GetString(i)方法时出现的异常情况。当对应字段的值为Null时&#xff0c;这个方法会抛出异常…

用户案例 | 蜀海供应链基于 Apache DolphinScheduler 的数据表血缘探索与跨大版本升级经验

导读 蜀海供应链是集销售、研发、采购、生产、品保、仓储、运输、信息、金融为一体的餐饮供应链服务企业。2021年初&#xff0c;蜀海信息技术中心大数据技术研发团队开始测试用DolphinScheduler作为数据中台和各业务产品项目的任务调度系统工具。本文主要分享了蜀海供应链在海…

【Node.js】—基本知识点总结

【Node.js】—基本知识总结 一、命令行常用操作 二、Node.js注意点 Node.js中不能使用BOM和DOM操作 总结 三、Buffer buffer是一个类似于数组的对象&#xff0c;用于表示固定长度的字节序列buffer的本质是一段内存空间&#xff0c;专门用来处理二进制数据 特点&#xff1a;…

postgresql-子查询

postgresql-子查询 子查询简介派生表IN 操作符ALL 操作符ANY 操作符关联子查询横向子查询EXISTS 操作符 子查询简介 子查询&#xff08;Subquery&#xff09;是指嵌套在其他 SELECT、INSERT、UPDATE 以及 DELETE 语句中的 查询语句 子查询的作用与多表连接查询有点类似&#x…

ElementUI浅尝辄止18:Avatar 头像

用图标、图片或者字符的形式展示用户或事物信息。 常用于管理系统或web网站的用户头像&#xff0c;在用户账户模块更换头像操作也能看到关于Avatar组件的应用。 1.如何使用&#xff1f; 通过 shape 和 size 设置头像的形状和大小。 <template><el-row class"de…

基于Python机器学习、深度学习提升气象、海洋、水文应用教程

详情点击链接&#xff1a;基于Python机器学习、深度学习提升气象、海洋、水文应用教程 前沿 Python是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;能够在不同操作系统和平台使用&#xff0c;简洁的语法和解释性语言使其成为理想的脚本语言。除了标准…

vue深拷贝的几种实现方式

1、通过递归方式实现深拷贝 比较全面的深拷贝&#xff0c;缺点是较为繁琐 function deepClone(obj) {var target {};for (var key in obj) {if (Object.prototype.hasOwnProperty.call(obj, key)) {if (typeof obj[key] object) {target[key] deepClone(obj[key]);} else {…

链表例题小总结:

链表&#xff1a; 第一种题型&#xff1a;双指针 力扣203&#xff1a;移除链表元素 力扣题目链接 题意&#xff1a;删除链表中等于给定值 val 的所有节点。示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]示例 2&#xff1…

MySQL——数据类型以及对表结构的修改

MySQL的数据类型 刚才我们在创建表的时候&#xff0c;说到了一个字段类型&#xff0c;所谓的字段类型就是这个字段能存放的数据的数据类型&#xff0c;在MySQL中有以下几种数据类型&#xff1a; 数据类型 大小&#xff08;字节&#xff09; 用途 格式 INT 4 整数 FLOAT…

Unity控制程序退出

大家好&#xff0c;我是阿赵。   最近把公司的游戏发布到各种PC的游戏大厅&#xff0c;遇到了挺多奇怪的需求。之前介绍了一些Unity发布PC端控制窗口最大最小化、修改exe信息等问题&#xff0c;这次来探讨一下退出游戏的问题。 一、收到奇怪的需求 某游戏大厅要求&#xff0…

RabbitMQ从入门到精通之安装、通讯方式详解

文章目录 RabbitMQ一、RabbitMQ介绍1.1 现存问题 一、RabbitMQ介绍二、RabbitMQ安装三、RabbitMQ架构四、RabbitMQ通信方式4.1 RabbitMQ提供的通讯方式4.2 Helloworld 方式4.2Work queues4.3 Publish/Subscribe4.4 Routing4.5 Topics4.6 RPC (了解) 五、Springboot 操作RabbitM…

【MyBatisⅡ】动态 SQL

目录 &#x1f392;1 if 标签 &#x1fad6;2 trim 标签 &#x1f460;3 where 标签 &#x1f9ba;4 set 标签 &#x1f3a8;5 foreach 标签 动态 sql 是Mybatis的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接。 在 xml 里面写判断条件。 动态SQL 在数据库里…

LeetCode 202 快乐数

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 法一&#xff1a;哈希 使用哈希表循环判断每次经过平方和的数&#xff0c;如果为1则直接返回true&#xff0c;若之前存在过但不为1则直接返回false 代码 class Solution { public:// 计算…

pytorch中squeeze函数用法

squeeze的中文意思是“挤压”&#xff0c;顾名思义&#xff0c;该函数的作用是压缩维度 squeeze(input, dimNone) -> Tensor input一个高维张量&#xff0c;如果各个维度中存在大小为1的维度&#xff0c;squeeze才起作用&#xff0c;下面举例说明 x torch.arange(6).res…