vue3 使用富文本

vue3 使用富文本

安装vue-quill

npm install @vueup/vue-quill@beta

使用

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

<QuillEditor
        ref="QuillEditorRef"
        :options="options"
        :content="textarea"
        content-type="html"
        @update:content="textChange"
      />

const options = {
  debug: 'info',
  modules: {
    // toolbar: ['bold', 'italic', 'underline'],
  },
  placeholder: '批量输入/粘贴 企业名称或者域名，以“行”为分割线；例如以下：\n北京安全共识科技有限公司\n百度网讯科技有限公司',
  readOnly: false,
  theme: 'snow',
}

const textChange = (e:any) => {
  textarea.value = e
  console.log(e, '98', textarea.value);
}

注解：
@update:content 内容改变事件
options：配置项
设置ref:便于调用quill支持的方法