vue-quill-editor 富文本编辑器在 Vue 中最简单使用

第一次接触 vue-quill-editor 富文本编辑器,去Github上下载了源码 vue-quill-editor ,npm install 试了半天也跑不通,后来才知道是在 Vue项目中引入使用的,本次博客仅做最简单的使用分享

首先创建一个 Vue 项目,执行 vue create vue-editor 创建名为 vue-editor 的项目

项目创建成功后,在控制台输入

npm install vue-quill-editor --save

打开 main.js,进行引入

//引入vue-quill-editor 富文本编辑器
import VueQuillEditor from "vue-quill-editor/src";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

接下来通过 标签即可进行使用

以 HelloWorld.vue 为例

<template>
  <div class="hello">
    <h1>vue-quill-editor富文本编辑器h1>
    <quill-editor>quill-editor>
  div>
template>

<script>
export default {
      
  name: 'HelloWorld',
}
script>

<style scoped>

style>

npm run serve 运行 Vue 项目即可
vue-quill-editor 富文本编辑器在 Vue 中最简单使用_第1张图片

你可能感兴趣的:(Vue,VueQuillEditor)