首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue组件——富文本编辑器

vue组件——富文本编辑器

作者头像
不愿意做鱼的小鲸鱼
发布于 2022-09-24 01:06:08
发布于 2022-09-24 01:06:08
4.2K00
代码可运行
举报
文章被收录于专栏:web全栈web全栈
运行总次数:0
代码可运行

什么是富文本编辑器

富文本编辑器支持markdown语法,是程序员做笔记,功能很多,样式很多的一种很方便的文本编辑器,很推荐学会使用markdown语法 今天在vue的学习中,用到了富文本编辑器的插件, 插件源码地址

怎么在vue组件页面中插入富文本编辑器

  1. 使用vue ui,在ui界面直接搜索依赖 vue-quill-editor

或者在项目根路径的命令框下 npm install vue-quill-editor --save

  1. 挂载 vue-quill-editor 插件 全局挂载
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)

局部挂载

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  }
}
  1. 插件的简单使用
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 富文本编辑器组件 -->
 <quill-editor v-model="addForm.goods_introduce" ref="myQuillEditor"></quill-editor>
  1. 插件的效果

总结

以直觉得markdown编辑器很好用,突然碰到使用的源码,挺简单的,也感觉很有趣,虽然是最简单的使用。更多的用法,可以参考文档,我想肯定还有更多的编辑器也有这样的插件,拓展的以后慢慢探索,,,

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验