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

概述

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

实现效果

实现

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

html 复制代码
<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. 文档编辑

javascript 复制代码
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. 文章预览

javascript 复制代码
const { createOpenViewer } = window.Doc;
// 创建阅读器
 const viewer = createOpenViewer(this.$refs.editor, {});
viewer.setDocument('text/lake', docContent);
相关推荐
爱吃生蚝的于勒1 小时前
【Linux】零基础学会linux环境基础开发工具使用(yum,vim,makefile,gdb)
linux·服务器·数据结构·c++·蓝桥杯·编辑器·vim
ONLYOFFICE2 小时前
ONLYOFFICE 桌面编辑器9.1版本已发布:PDF密文功能和全新注释、工作表公式优化及文件恢复便捷化等
pdf·编辑器·onlyoffice 模板
2401_837088502 小时前
Redis的vim基本操作
linux·编辑器·vim
@才华有限公司13 小时前
vscode使用翻译插件分享
ide·vscode·编辑器
吹个口哨写代码15 小时前
处理文本编辑器存的json格式报错问题,对编辑器存的字段进行转换处理,再通过json返回
java·编辑器·json
小蜗子17 小时前
vscode 侧边文件夹名字体大一点
ide·vscode·编辑器
Zach_yuan1 天前
Linux编辑器vim
linux·编辑器·vim
诗意地回家2 天前
工具: 下载vscode .vsix扩展文件方法
ide·vscode·编辑器
UpYoung!2 天前
无广技术贴!【PDF编辑器】Solid Converter PDF保姆级图文下载安装指南——实用推荐之PDF编辑软件
学习·数学建模·pdf·编辑器·运维开发·个人开发
东方佑2 天前
基于浏览器的DOCX文件编辑器:实现导入、编辑与导出功能
编辑器