yuque-rich-text

v1.0.2

Published

7 months ago

由于本人觉得语雀编辑器非常好用，很符合我的使用习惯，然后发现语雀的浏览器插件实现了编辑器的功能，所以将其富文本的功能拆分位一个单独的Vue3组件。

0High
0Medium
0Low

entity-now

富文本编辑器 Rich Text yuque 语雀 vue3 rich text

Yuque Rich Text（语雀富文本编辑器）

由于本人觉得语雀编辑器非常好用，很符合我的使用习惯，然后发现语雀的Chrome浏览器插件实现了编辑器的功能，所以将其富文本的功能拆分位一个单独的Vue3组件。

安装

npm i yuque-rich-text

截图

组件实例

引入相关样式

head标签中加入

  <head>
    <link rel="stylesheet" type="text/css" href="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.css"/>
    <link rel="stylesheet" type="text/css" href="https://gw.alipayobjects.com/os/lib/antd/4.24.13/dist/antd.css"/>
  </head>

body标签内的最后一行加入

  <body>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://gw.alipayobjects.com/render/p/yuyan_v/180020010000005484/7.1.4/CodeMirror.js"></script>
    <script src="https://ur.alipay.com/tracert_a385.js"></script>
    <script src="https://mdn.alipayobjects.com/design_kitchencore/afts/file/ANSZQ7GHQPMAAAAAAAAAAAAADhulAQBr"></script>
    <script src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.umd.js"></script>
  </body>

编辑使用案例

注意不可在onChange事件中修改value的值，否则会进入无限递归。


<template>
  <YuqueRichText ref="editorRef" :value="content" @onChange="editChange" @onLoad="load"/>
  <button @click="appendText">追加内容</button>
  <button @click="getContent">获取内容</button>
  <button @click="setText">更新内容</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { YuqueRichText } from 'yuque-rich-text'
import type { IEditorRef } from "yuque-rich-text";

const editorRef = ref<IEditorRef>()
const content = ref('初始内容')

const appendText = () => {
  if (editorRef.value) {
    editorRef.value.appendContent('<p>这是追加的内容</p>', true)
  }
}
const setText = () => {
  if (editorRef.value) {
    editorRef.value.setContent('<p>更新的内容</p>')
  }
}

const getContent = () => {
  if (editorRef.value) {
    const html = editorRef.value.getContent('text/html')
    alert('当前内容:' + html)
  }
}

const load = ()=>{
  console.log("编辑器加载成功...");
  // 此时可进行增删改查操作
  editorRef.value?.appendContent('<p>这是追加的内容</p><br>', true)
}

const editChange = (e : string)=>{
  console.log("编辑器内容发生变化：", e);
}
</script>

预览模式

使用也非常简单，将组建的isview属性改为true即可。

<template>
  <YuqueRichText :isview="true" :value="content" />
</template>

Props

    export interface EditorProps {
        value: string; // 传递给组件的内容
        children?: any; // 暂无实现
        isview?: boolean; // 为true该组件是只读的，为空或false则是编辑模式
        uploadImage?: (params: { data: string | File }) => Promise<{
            url: string;
            size: number;
            filename: string;
        }>;
        uploadVideo?: (params: { data: string | File }) => Promise<{
            url: string;
            size: number;
            filename: string;
        }>;
    }

Emit

    export interface EditorEmits{
        onChange?: (value: string) => void;
        onLoad?: () => void;
        onSave?: () => void;
    }

Expose

    export interface IEditorRef {
        /**
         * 追加html到文档
         * @param html html内容
         * @param breakLine 是否前置一个换行符
         */
        appendContent: (html: string, breakLine?: boolean) => void;
        /**
         * 设置文档内容，将清空旧的内容
         * @param html html内容
         */
        setContent: (content: string, type?: "text/lake" | "text/html") => void;
        /**
         * 获取文档内容
         * @param type 内容的格式
         * @return 文档内容
         */
        getContent: (type: "lake" | "text/html") => string;
        /**
         * 判断当前文档是否是空文档
         * @return true表示当前是空文档
         */
        isEmpty: () => boolean;

        /**
         * 获取额外信息
         * @return
         */
        getSummaryContent: () => string;

        /**
         * 统计字数
         * @return
         */
        wordCount: () => number;

        /**
         * 聚焦到文档开头
         * @param {number} offset 偏移多少个段落，可以将选区落到开头的第offset个段落上, 默认是0
         * @return
         */
        focusToStart: (offset?: number) => void;

        /**
         * 插入换行符
         * @return
         */
        insertBreakLine: () => void;
    }

⚠️ Disclaimer

This is an unofficial third-party extension for [www.yuque.com]. It is not affiliated with, maintained by, or endorsed by [www.yuque.com].

Use at your own risk. The developers are not responsible for any violations of [www.yuque.com]'s terms or damages caused by this project.
Do not use if [www.yuque.com] prohibits third-party modifications.
This project does not redistribute any copyrighted materials from [www.yuque.com].

Read [www.yuque.com]'s Terms of Service before installation.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme