via-editor v1.0.34

富文本编辑器

安装

npm install via-editor --save

快速上手

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

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

const { Component } = require('via-editor');

export default {
  components: {
    'via-editor': Component,
  },
  data() {
    return {
      value: '',
      options: { // 里面的配置项都是可选的，如果设置了，则会覆盖默认配置
        isPasteClearStyle: true, // 粘贴时清除样式
        preview: { // 预览选项
          appendToBody: false, // 插入body
          modal: true, // 模态框
        },
        output:{
          allowEmpty: true, // 当没有输入时，是否允许返回空字符串；而不是容器元素内容本身，即<div class="ql-editor"></div>
        },
        image: {
          size: {
            max: 300, // KB
            error: '图片大小不能大于300KB',
          },
          paste: { 
            prevent: false, // 是否可粘贴图片
            error: '请从本地上传图片'
          },
          accepts: ['.png', '.jpg', '.jpeg'],
          upload: function(file) { // 图片上传的例子，目前只是展示base64数据
            return new Promise(function(resolve) {
              const reader = new FileReader();

              reader.readAsDataURL(file);
              reader.onload = function(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}],
                [{ list: 'ordered' }, { list: 'bullet' }],
                ['link'],
                [{ direction: 'rtl' }],
                [{ 'indent': '+1' }, { 'indent': '-1'}],
                [{ align: ['', 'center', 'right', 'justify'] }],
                ['clean'],
              ],
            }
          },
        },
      },
    };
  },
};