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

   日期:2020-07-17     浏览:110    评论:0    
核心提示:第一次接触 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中

第一次接触 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 项目即可

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服