第一次接触 vue-quill-editor 富文本编辑器,去Github上下载了源码 vue-quill-editor ,npm install 试了半天也跑不通,后来才知道是在 Vue项目中引入使用的,本次博客仅做最简单的使用分享
首先创建一个 Vue 项目,我使用的是 Vue 3,执行 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)
接下来通过 <quill-editor></quill-editor>
标签即可进行使用
以 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 项目即可