vue-quill-xiumi

简介

在quill中集成秀米编辑器和135编辑器。

• 通过在toolbar中添加按钮，以弹窗的方式弹出秀米编辑器和135编辑器。
• 监听复制动作，秀米等文章也能直接复制进quill中

在线预览

github地址

安装依赖

  npm i vue-quill-xiumi --save
  # or
  yarn add vue-quill-xiumi

• 在main.js全局使用antd的模态框及使用quillEditor

  //  antd的modal依赖
  import modal from 'ant-design-vue';
  import 'ant-design-vue/dist/antd.css';
  Vue.use(modal)
  //  编辑器依赖
  import quillEditor from 'vue-quill-xiumi';
  Vue.use(quillEditor);

• 或在组件里使用editor

 // 注意这个{}
 import {quillEditor} from 'vue-quill-xiumi';
 export default {
  components: {
    quillEditor
  }
}

• 简单使用示例/simple example

  <quillEditor  v-model="msg"/>

• 插槽/toolbar

  <quillEditor v-model="msg">
    <template #toolbar>
      <!-- 这里放按钮 -->
      <!-- 更多toolbar按钮请看官网 -->
      <span class="ql-formats">
        <select class="ql-font"></select>
        <select class="ql-size"></select>
      </span>
      <span class="ql-formats">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-strike"></button>
      </span>
      <span class="ql-formats">
        <select class="ql-color"></select>
        <select class="ql-background"></select>
      </span>
      <span class="ql-formats">
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-header" value="1"></button>
        <button class="ql-header" value="2"></button>
        <button class="ql-blockquote"></button>
        <button class="ql-code-block"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-list" value="ordered"></button>
        <button class="ql-list" value="bullet"></button>
        <button class="ql-indent" value="-1"></button>
        <button class="ql-indent" value="+1"></button>
      </span>
      <span class="ql-formats">
        <button class="ql-direction" value="rtl"></button>
        <select class="ql-align"></select>
      </span>
      <span class="ql-formats">
        <button class="ql-link"></button>
        <button class="ql-image"></button>
        <button class="ql-video"></button>
        <button class="ql-formula"></button>
      </span>
    </template>
  </quillEditor>

• 所有事件及传值/event and props

  <quillEditor 
      v-model="msg" 
      @ready="ready($event)"
      @getConetntLength="getConetntLength($event)"
      @selectionChange="selectionChange($event)"
      :showXiumi="true"
      :show135="true"
      :urlofXiumi="./public/pluging/xiumi-ue-dialog-v5.html"
      :urlof135="./public/pluging/135EditorDialogPage.html"
      :disabled="false"
      :options="options"
      height="400px"
   />

说明

• options 参数不建议传modules.toolbar，会导致秀米和135图标被覆盖而不显示

const options = {
  theme: 'snow',
  modules: {
    // toolbar: ''
  },
  placeholder: 'Insert text here ...',
  readOnly: false
}

• 如果v-model不够使用，实例中也提供了插入数据的方法

<quillEditor ref="editor">
</quillEditor>

// 插入普通数据
  
this.$refs.editor.setData("hello", 0) // data & selection
this.$refs.editor.setData("hello world") // or just data

// 插入秀米类型数据

this.$refs.editor.setRichText("hello world", 0) // data & selection
this.$refs.editor.setRichText("hello world") // or just data

注意

• 秀米和135地址默认打开为项目中的地址(https://font-size.github.io/vue-quill-simple-demo/public/pluging/xiumi-ue-dialog-v5.html)，可能会产生跨域问题，解决方法如下：

  1：拷贝秀米和135的html到本地。 你可以在 此项目的github地址public/pluging下拷贝这2个文件代码。 2：作为props传入页面地址。例如路径为 /public/pluging/xiumi-ue-dialog-v5.html和/public/pluging/xiumi-ue-dialog-v5.html

  <quillEditor 
    v-model="msg" 
    :urlofXiumi="./public/pluging/xiumi-ue-dialog-v5.html"
    :urlof135="./public/pluging/135EditorDialogPage.html"
  />

xiumi-ue-dialog-v5.html 135EditorDialogPage.html

• 此插件基于quill 1x版本开发，所以不支持表格功能。如果需要表格，请自行升级到quill-2.0-dev。
• 由于quill设置样式的方式是给文本添加class，展示内容需要额外添加样式文件，并设置一个总的class。

  <link rel="stylesheet" src="quill/dist/quill.core.css" />

  <div class="ql-editor">
    <!-- text in here -->
  </div>

资料

quill官网 quill GitHub quill中文文档 秀米官网 135官网

License

MIT