via-editor 富文本编辑器

一个基于 Vue 的富文本编辑器组件。

版本与 Vue 兼容性

• 1.x 系列（<= 1.1.7）：支持 Vue 2，仅提供 UMD 版本（不提供 ESM 包）。
• 2.x 系列（>= 2.0.0）：仅支持 Vue 3，不再兼容 Vue 2。

构建产物说明

• via-editor.js

  • 构建形式：UMD
  • 是否内置 Vue：否（通过 externals 外置 Vue）
  • 适用场景：通过 npm 安装、使用 Webpack / Vite / Rollup 等打包工具构建时的默认入口（package.json 中的 main），需自行安装并提供 vue@^3。

• via-editor-vue.js

  • 构建形式：UMD
  • 是否内置 Vue：是（打包时一并内置 Vue）
  • 适用场景：CDN / <script> 直接引入时使用，适合不经过打包工具的老项目或简单 Demo。

• via-editor.esm.js / via-editor.esm

  • 构建形式：ES Module
  • 是否内置 Vue：否（以 import vue from 'vue' 形式外置）
  • 适用场景：现代打包工具的 ESM 入口（package.json 中的 module），更利于 Tree-shaking 与按需加载。

安装

npm install via-editor --save

快速上手

<div>
  <via-editor v-model="value" :options="options"></via-editor>
</div>

以 Vue 3 + <script setup> + ESM 方式为例：

<template>
  <ViaEditor
    v-model="value"
    :options="options"
  />
</template>

<script setup>
import { ref } from 'vue';

import 'via-editor/core.css';       // 核心样式（必须）
import 'via-editor/via-editor.css'; // 编辑器样式（必须）
import 'via-editor/theme.css';      // 文章内容的样式（自选）

import { ViaEditor } from 'via-editor'; // 对应 ESM 入口 via-editor.esm.js

const value = ref('');

const options = { // 里面的配置项都是可选的，如果设置了，则会覆盖默认配置
  deleteEmptyLineBeforeHeader: false, // 删除标题前的空行
  isPasteClearStyle: true, // 粘贴时清除样式
  preview: { // 预览选项
    appendToBody: false, // 插入body
    modal: true, // 模态框
  },
  output: {
    allowEmpty: true, // 当没有输入时，是否允许返回空字符串；而不是容器元素内容本身，即<div class="ql-editor"></div>
  },
  markdownSupport: true, // 是否支持markdown 配置放在quill.modules下 为true时 使用默认配置
  // QuillMarkdown: { // markdown 默认配置 如果需要自定义将配置加入到quill.modules下
  //   ignoreTags: ['h5', 'h6'], // @option - if you need to ignore some tags.
  //
  //   tags: { // @option if you need to change for trigger pattern for some tags.
  //     blockquote: {
  //       pattern: /^(>){1,2}\s/g,
  //     },
  //     bold: {
  //       pattern: /(\*){2}(.+?)(?:\1){2}/g,
  //     },
  //     italic: {
  //       pattern: /(\*){1}(.+?)(?:\1){1}/g,
  //     },
  //   },
  // },
  image: {
    size: {
      max: 300, // KB
      error: '图片大小不能大于300KB',
    },
    paste: {
      prevent: false, // 是否可粘贴图片
      error: '请从本地上传图片'
    },
    accepts: ['.png', '.jpg', '.jpeg'],
    upload(file) { // 图片上传的例子，目前只是展示base64数据
      return new Promise((resolve) => {
        const reader = new FileReader();

        reader.readAsDataURL(file);
        reader.onload = (event) => {
          resolve({
            code: 0,
            data: event.target?.result,
            message: '上传失败',
          });
        };
      });
    },
  },
  video: {
    checkURL(url) { // 校验输入的视频链接
      return {
        valid: true,
        message: 'ok',
      };
    },
  },
  quill: { // quill的配置 https://quilljs.com/docs/configuration/
    theme: 'bubble',
    /**
     * 修复link等输入框回车后跳到顶部问题
     */
    scrollingContainer: 'html',
    placeholder: '开始编辑',
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic'],
          [{ header: 1 }, { header: 2 }, { header: 3 }, { header: 4 }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['link'],
          [{ direction: 'rtl' }],
          [{ 'indent': '+1' }, { 'indent': '-1' }],
          [{ align: ['', 'center', 'right', 'justify'] }],
          ['clean'],
        ],
      }
    },
  },
};
</script>