vue-quill-xiumi

在quill中集成秀米及135编辑器

Usage no npm install needed!

<script type="module">
  import vueQuillXiumi from 'https://cdn.skypack.dev/vue-quill-xiumi';
</script>

README

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

注意

  <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