记录一下 quillEditor 富文本的使用

最新推荐文章于 2024-05-28 14:58:21 发布

returnture

最新推荐文章于 2024-05-28 14:58:21 发布

阅读量973

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_62452941/article/details/124017729

版权

<template>
  <div class="prefixCls">
    <div>
      <quill-editor
        class="editor"
        ref="myTextEditor"
        v-model="form.content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)"
      >
        <!-- <div v-html="editorContent" class="richTextStyle"></div> -->
      </quill-editor>
      <!-- 隐藏上传图片按钮 -->
      <div style="display: none">
        <el-upload
          action="xxxx"
          multiple
          :limit="3"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          ref="upload"
        >
          <el-button size="small" type="primary">11</el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import option from "./option";
import toolbar from "./toolbar";
import { quillEditor } from "vue-quill-editor";
export default {
  name: "QuillEditor",
  components: {
    quillEditor,
  },
  props: {},
  data() {
    const bindings = {
      custom: {
        key: 13,
        handler: function (range, context) {
          this.quill.insertText(range.index, "\n ");
          setTimeout(() => {
            let nowRange = this.quill.getSelection().index - 1;
            this.quill.setSelection(nowRange);
          }, 0);
        },
      },
    };
    return {
      editorOption: {
        modules: {
          keyboard: {
            bindings: bindings,
          },
          toolbar: {
            container: toolbar,
            handlers: {
              image: function (value) {
                if (value) {
                  console.log(value);
                  document.querySelector(".el-button").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          }, //工具菜单栏配置
        },
        placeholder: "请在这里添加产品描述", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
      aa: "//lmg.jj20.com/up/allimg/4k/s/02/2109242332225H9-0-lp.jpg",
      dialogVisible: false,
      form: {
        // 提交表单
        title: "",
        con