vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器
wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你!
第一步:先保证你的电脑中安装有node,当然使用cdn也可以,下载到本地也行,我这里用的vue-cli,顺便下载到项目依赖中了
本地下载:
https://github.com/wangfupeng1988/wangEditor/releases
cdn使用:
https://unpkg.com/wangeditor/release/wangEditor.min.js
node下载:
npm i wangeditor -S
第二步:在项目中引入该插件并定义html结构,我这里使用vue脚手架,没有使用脚手架和其他构建工具的同学可以使用script标签对插件进行引用
例如:
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
vue-cli中使用:先建立模板,然后引入插件,创建即可,可以对菜单进行配置,也可以对编辑器中的内容进行实时监听
import E from "wangeditor";
export default {
name: "Editor",
data() {
return {
editor: null,
editorContent: ''
};
},
// catchData是一个类似回调函数,来自父组件,当然也可以自己写一个函数,主要是用来获取富文本编辑器中的html内容用来传递给服务端
props: ['catchData'], // 接收父组件的方法
mounted() {
this.editor = new E(this.$refs.editorElem);
// 编辑器的事件,每次改变会获取其html内容
this.editor.customConfig.onchange = html => {
this.editorContent = html;
this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
};
this.editor.customConfig.menus = [
// 菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
this.editor.create(); // 创建富文本实例
以上内容就可以实现vue中简单使用富文本编辑器的功能了,更多介绍请参考官网
vue获取编辑器纯文字_vue中使用富文本编辑器相关推荐
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
- react中使用富文本编辑器,发布文章
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 富文本编辑器,在开发中是常用的,下面直接进入正题了: 1. ...
- 在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...
- React中使用富文本编辑器Quill,支持粘贴图片
最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中. 由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源 ...
- ThinkPHP框架中使用富文本编辑器后如何输出
htmlspecialchars_decode()用这个能解析里面的符号 我们在利用ThinkPHP提交数据的时候,数据库里的数据是含各种html标签的,那么在输出时就可以直接输出嘛.但是,也许你的老 ...
- 在vue3中使用富文本编辑器WangEditor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-fo ...
- react html编辑器,react项目中使用富文本编辑器
安装: cnpm install -D draft-js draftjs-to-html react-draft-wysiwyg // 用来指定商品详情的富文本编辑库 import React, { ...
最新文章
- ORA-00845 : MEMORY_TARGET not supported on this system(调大数据库内存无法启动)
- java程序设计B_Java程序设计11——GUI设计与事件处理B
- python实现人像美颜
- 2015年蓝桥杯省赛第5题--九数组分数
- MQTT发布消息核心流程之一
- readSerializableObj
- verilog出租车计价器
- Asp.net 文件上传的 FileUpload FileName 和 FileUpload PostedFile.FileName的细节问题
- java将HTML文件转化为pdf文件,如何使用Java将HTML网页转换为PDF文件
- CF662C Binary Table(FWT)
- [html] 使用svg画一个微信的logo
- 云+X案例展 | 民生类:贝斯平云助力500强跨国企数字化转型
- aix查看oracle数据库端口号,通过netstat+rmsock查找AIX端口对应进程
- Sublime Text 3使用技巧总结--快捷键及常用插件
- 新浪微博首席架构师漫谈微博底层架构
- 关于虚拟机.vmdk与.ovf 磁盘装载问题
- hdfs清理回收站命令(参考)
- 关于GPL协议的理解(开源与商用、免费与收费的理解)
- kafka日志清理策略,compact和delete
- 学校作业-Usaco DP水题
热门文章
- 【算法】二进制 与、或、异或运算
- 【Java】java Arrays.asList 在idea 下 debug 不同结果的表现 非常诡异 胆小勿入
- 【Docker】elasticsearch 监控工具 elasticsearch-HQ Unable to create connection to: http://localhost:9200
- 【MySQL】MySQL 如何查看sql语句执行时间和效率
- MySQL-02-windows下查看frm,myi,myd
- 为什么redis可以做分布式锁
- phpexcel删除行_使用PHPExcel删除行
- C语言购物篮解题思路,大型超购物篮问题分析数学建模.doc
- MySQL学习-排序与分组函数
- Spring框架----Spring的bean注解