vue + quillEditor富文本编辑器

quillEditor富文本编辑器

quillEditor 是我21年就使用过的一款富文本编辑器 个人感觉还可以 程序跑的通 一切顺利哈 想要有预览效果的 可以查看我写的 vue + mavon-editor 编辑器的文章

言归正传 使用步骤如下

一、npm下载依赖

npm install vue-quill-editor --save

二、引入使用
template 结构中

<quill-editor
  v-model="newsForm.newsContent"
  :options="editorOption"
  ref="QuillEditor"
  @blur="onEditorBlur($event)"
  @focus="onEditorFocus($event)"
  @change="onEditorChange($event)"
  >
quill-editor>

javascript 结构中

// 引入样式文件
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
components: {
    quillEditor,
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
 data(){
   return:{
    // 富文本
      editorLoading: false,
      editorOption: {} // 富文本配置
  }
 },
// 富文本的配置文件
async created() {
    this.editorOption = {
      modules: {
        toolbar: {
          container: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],

            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            [{ direction: "rtl" }], // text direction

            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],

            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ["link", "image", "video"],
            ["clean"] // remove formatting button
          ], // 工具栏
          handlers: {
            image: function(value) {
              if (value) {
                document.querySelector(".uploadImgEditor").click();
              } else {
                this.quill.format("image", false);
              }
            }
          }
        }
      }
    };
  },


methods:{
  // 富文本失去焦点事件
    onEditorBlur() {
      // console.log(this.content)
    },
    // 富文本获得焦点事件
    onEditorFocus() {
      // console.log(this.content)
    },
    // 富文本内容改变事件
    onEditorChange() {
      // console.log(this.fNewsContent);
    },
    
  // 上传图片部分
  EditorUpload() {
      // 设置加载
      this.editorLoading = true;
      var file = this.$refs.uploadInput.files[0];
      // 请求数据  这边用的是 FormData() 按照后端需要的数据进行上传参数
      uploadPath().then(res => {
        const config = res.data;
        const formData = new FormData();
        formData.append("filename", file.name); //FormData() 用法
        formData.append("key", config.filePath + file.name); //FormData() 用法
        formData.append("policy", config.policy); //FormData() 用法
        formData.append("OSSAccessKeyId", config.accessKeyId); //FormData() 用法
        formData.append("success_action_status", res.code); //FormData() 用法
        formData.append("callback", config.callback); //FormData() 用法
        formData.append("signature", config.signature); //FormData() 用法
        formData.append("file", file); //FormData
        this.editorLoading = false;
        // 请求阿里云获取上传的地址
        this.$axios
          .post(config.endpoint, formData, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            let quill = this.$refs.QuillEditor.quill;
            let length = quill.getSelection().index;
            quill.insertEmbed(length, "image", res.data.data);
            quill.setSelection(length + 1);
          });
      });
    },
}

以上基本能实现你想要的效果 但当时写的有点急 没有优化

你们也可以进行 组件的封装 在需要的界面再引入这个富文本编辑器

没了，结束了，如有错误，欢迎留言.如有问题，不吝赐教。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~