基于語雀編輯器的在線文檔編輯與查看功能

更新時(shí)間：2024年07月12日 12:14:21 作者：牛老師講GIS

語雀是一個(gè)非常優(yōu)秀的文檔和知識(shí)庫工具,其編輯器更是非常好用,雖無開源版本,但有編譯好的可以使用,本文基于語雀編輯器實(shí)現(xiàn)在線文檔的編輯與文章的預(yù)覽,感興趣的朋友一起看看吧

概述

語雀是一個(gè)非常優(yōu)秀的文檔和知識(shí)庫工具，其編輯器更是非常好用，雖無開源版本，但有編譯好的可以使用。本文基于語雀編輯器實(shí)現(xiàn)在線文檔的編輯與文章的預(yù)覽。

實(shí)現(xiàn)效果

實(shí)現(xiàn)

參考語雀編輯器官方文檔，其實(shí)現(xiàn)需要引入以下文件：

<link rel="stylesheet" type="text/css"  rel="external nofollow" />
<link rel="stylesheet" type="text/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選區(qū)工具欄
      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表示需要轉(zhuǎn)存，會(huì)調(diào)用createUploadPromise
      return false;
    },
    // 配置上傳接口,要返回一個(gè)promise對(duì)象
    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
// 獲取文檔內(nèi)容
docEditor.getDocument('text/lake')
// 設(shè)置文檔內(nèi)容
docEditor.setDocument('text/lake', docContent);

2. 文章預(yù)覽

const { createOpenViewer } = window.Doc;
// 創(chuàng)建閱讀器
 const viewer = createOpenViewer(this.$refs.editor, {});
viewer.setDocument('text/lake', docContent);

到此這篇關(guān)于基于語雀編輯器的在線文檔編輯與查看的文章就介紹到這了,更多相關(guān)語雀編輯器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: