vue-q-editor

基于vue3和quill的富文本编辑器

1. 支持v-model:content双向绑定
2. 字数统计和图片数统计
3. 动态placeholder
4. 输入防抖
5. 纯文本粘贴过滤
6. 手动图片插入工具
7. 最大字数和图片数控制
8. 原生配置项覆盖

安装

 # 通过 npm 安装
npm i vue-q-editor -S

# 通过 yarn 安装
yarn add vue-q-editor

配置

全局注册

 // main.ts
import { createApp } from 'vue'
import VueQEditor from 'vue-q-editor'
import App from './App.vue'

createApp(App).use(VueQEditor).mount('#app')

或在使用的地方单独引入

 import { VueQEditor } from 'vue-q-editor'

使用

 <template>
  <vue-q-editor
    ref="editorRef"
    v-model:content="content"
    height="400px"
    :debounce-time="500"
    :options="options"
    @change="handleChange" />
  <div>
    <span>字数：{{textCount}}</span>
    <span>图片数：{{imgCount}}</span>
  </div>
  <button @click="handleInsertImg">插入图片</button>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ChangeArg, ExposeEvents } from 'vue-q-editor'

/** 手动插入图片 */
const editorRef = ref(null)
const handleInsertImg = () => {
  // do something before...
  const exposeEvents = editorRef.value as ExposeEvents
  if (exposeEvents.insertImg('https://img01.yzcdn.cn/vant/logo.png')) {
    console.log('图片插入成功')
  } else {
    console.log('图片插入失败')
  }
}

/** 获取字数和图片数 */
const textCount = ref(0)
const imgCount = ref(0)
const handleChange = (arg: ChangeArg) => {
  textCount.value = arg.textCount
  imgCount.value = arg.imgCount
}

/** 内容双向绑定 */
const content = ref('')
watch(content, (val) => {
  console.log('content: ', val)
})

/** 原生配置项覆盖 */
const options = {
  theme: 'snow',
  boundary: document.body,
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ direction: 'rtl' }],
      [{ size: ['small', false, 'large', 'huge'] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }]
    ]
  },
  placeholder: 'Insert content here ...',
  readOnly: false
}
</script>

Attributes

 {
  content?: string // 内容绑定
  contentType?: string // 内容类型
  height?: string // 高度
  width?: string // 宽度
  disabled?: boolean // 禁用输入
  placeholder?: string // 占位符
  debounceTime?: number // 防抖时长
  maxTextCount?: number // 最大文字输入数
  maxImgCount?: number // 最大图片数量
  plainClipboard?: boolean // 去样式粘贴板
  options?: QuillOptionsStatic // 原生配置项
}

Events

事件	描述	参数
ready	编辑器初始化完成后回调	无
change	编辑器内容变化时回调	ChangeParams

ChangeParams

 {
  content: string
  textCount: number
  imgCount: number
}

引用事件

暴露出来的通过ref引用调用的事件

事件	描述	参数	返回
insertImg	插入图片	图片的url字符串	boolean
getImgsCount	获取当前图片数量	无	number
getText	获取编辑器中的文本内容	无	string