quillEditor从0到1安装及配置

最新推荐文章于 2024-09-13 22:13:26 发布

Yumi_biu

最新推荐文章于 2024-09-13 22:13:26 发布

阅读量791

点赞数 1

文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/echo_____/article/details/123236119

版权

本文介绍了如何在Vue项目中集成Quill富文本编辑器，包括安装依赖、配置vue.config.js、组件化引入及使用方法，并展示了在页面中创建和展示编辑器的示例代码。此外，还提及了自定义设置和方法的后续更新内容。

摘要由CSDN通过智能技术生成

1、安装依赖（使用了四个依赖，两个操作图片的依赖不需要可以不安装）

"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3", // 允许粘贴图像并将其拖放到编辑器中。
"quill-image-resize-module": "^3.0.0", // 允许图片大小拖动设置
"vue-quill-editor": "^3.0.6"

2、在配置文件（vue.config.js）中添加处理的plugin

configureWebpack: config => {
    config.plugins.push(
      new webpack.ProvidePlugin({
        "window.Quill": "quill/dist/quill.js",
        Quill: "quill/dist/quill.js"
      })
    );
}

3、页面中引入vue-quill-editor（写成组件方便调用及编写自定义方法）

<template>
  <div>
    <!-- 引入并添加自定义options  -->
    <quill-editor
      class="ql-editor"
      ref="myQuillEditor"
      v-bind="$attrs"
      v-on="$listeners"
      :options="quillOptions"
    />
  </div>
</template>

<script>
// 引入组件及相关联的css文件
import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
</script>

4、使用ql-editor

<template>
  <div>
    <quill-editor
      style="width:1500px;height:500px"
      class="ql-editor"
      v-model="data"
    ></quill-editor>
    <!-- 同步展示在界面中，一定要加class=ql-editor -->
    <div v-html="data" class="ql-editor"></div>
  </div>
</template>
<script>
import QuillEditor from "@/components/quill/QuillEditor.vue";
export default {
  name: "Test",
  components: { QuillEditor },
  data() {
    return {
      data: ""
    };
  },
  computed: {},
  methods: {},
  mounted() {}
};
</script>

添加自定义设置及自定义方法的文章后续更新