教你两分钟在Vue中使用富文本编辑器quill-editor
程序员文章站
2024-01-28 18:32:28
...
一、富文本编辑器是什么?
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。
二、在Vue中配置
1、下载Vue-Quill-Editor
npm install vue-quill-editor --save
2、下载quill(Vue-Quill-Editor需要依赖)
npm install quill --save
三、使用方法
<template>
<div>
<!-- 富文本编辑器 -->
<div class="box">
<quill-editor></quill-editor></div>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components:{
quillEditor
},
}
</script>
<style lang="scss" scoped>
.box{
width: 500px;
height: 300px;
}
</style>
四、演示效果
欢迎大家进群进行技术性的探讨, 群号:954314851
推荐阅读
-
教你两分钟在Vue中使用富文本编辑器quill-editor
-
Vue中Quill富文本编辑器的使用教程
-
在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
-
在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
-
Vue中Quill富文本编辑器的使用教程
-
在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
-
在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
-
在vue中使用quill-editor富文本编辑器(自定义工具栏、重写上传文件功能、工具栏中增加额外的功能按钮)