官方首页：https://www.wangeditor.com/

官方文档：https://www.wangeditor.com/doc/

基本使用

使用方式

下载

可以使用npm安装也可以使用CDN进行连接

npm 安装 npm i wangeditor --save

CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js

使用CDN js 外链引入

<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div><!-- 引入 wangEditor.min.js -->
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')// 或者 const editor = new E( document.getElementById('div1') )editor.create()
</script>

使用npm安装

在需要使用wangeditor的组建中进行引入

import E from "wangeditor";

然后再created函数中进行创建

//创建
const editor = new E(this.$refs.editor);
//或者通过dom节点创建
//const editor = new E(document.getElementById('richText');//初始化
editor.create()

html结构是

<template><div><div id="richText" ref="editor"></div></div>
</template>

设置高度、z-index、配置placeholder

设置方式相同

在创建和初始化之前书写就可以

//创建
const editor = new E(this.$refs.editor);
//或者通过dom节点创建
//const editor = new E(document.getElementById('richText');// 设置高度editor.config.height = 500;// 配置z-indexeditor.config.zIndex = 500;// 配置placeholdereditor.config.placeholder = "自定义 placeholder 提示文字";// editor.config.placeholder = '' // 不想使用 placeholder ，赋值为空字符串即可//初始化
editor.create()

一个页面多个编辑器

在一个页面上创建多个编辑器的时候，可以直接在new后面添加多个

const editor1 = new E('#div1', '#div2')
editor1.create()const editor2 = new E('#div3')
editor2.create()

自动 focus

编辑器初始化时，默认会自动 focus 到编辑区域。可通过如下操作，取消自动 focus 。

如果只有一个富文本编辑可以直接忽略，如果有其他的就需要取消自动focus

const editor = new E('#div1')// 取消自动 focus
editor.config.focus = falseeditor.create()

自定义 alert

编辑器 customAlert 是对全局的alert做了统一处理，默认为 window.alert。

如觉得浏览器自带的alert体验不佳，可自定义 alert，以便于达到与自身项目统一的alert效果。

const editor = new E('#div1')// 自定义 alerteditor.config.customAlert = function (s, t) {console.log("s, t", s, t);/*** s 是指 错误提示* t 是指 类型*/_this.$message({type:t,message:s})};editor.create()

数据回显

在使用wangeditor的时候，有可能会存在再次编辑情况，再次编辑就需要将之前的文本进行回显，回显使用一下代码

const E = window.wangEditorconst editor = new E('#div1')editor.create()editor.txt.html(回显的变量) // 重新设置编辑器内容

配置菜单

基本上按照官方文档书写就可以

自定义菜单

editor.config.menus

使用 editor.config.menus 定义显示哪些菜单和菜单的顺序。

想要那些菜单就写上那些

 const E = window.wangEditorconst editor = new E('#div1')// 配置菜单栏，删减菜单，调整顺序editor.config.menus = ['bold','head','link','italic','underline']editor.create()

editor.config.excludeMenus

使用 editor.config.excludeMenus 当只需剔除少数菜单的时候，直接设置不需要的菜单

不想要那些菜单就写上那些

 const E = window.wangEditorconst editor = new E('#div1')// 配置菜单栏，设置不需要的菜单editor.config.excludeMenus = ['emoticon','video']editor.create()

【注意】不要同时使用 editor.config.menus 和 editor.config.excludeMenus，以免引起冲突和混乱。

所有菜单

默认情况下会显示所有的菜单，配置如下：

// 默认情况下，显示所有菜单
editor.config.menus = ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','todo','justify','quote','emoticon','image','video','table','code','splitLine','undo','redo',
]

配置颜色

编辑器的字体颜色和背景色，可以通过 editor.config.colors 自定义配置

字体颜色和背景颜色同时生效

const E = window.wangEditor
const editor = new E('#div1')// 配置颜色（文字颜色、背景色）
editor.config.colors = ['#000000','#eeece0','#1c487f','#4d80bf'
]editor.create()

配置字体

编辑器的字体，可以通过 editor.config.fontNames 配置。

const E = window.wangEditor
const editor = new E('#div1')// 配置字体
editor.config.fontNames = [//方式一// 对象形式 v4.6.16{name:"黑体",value:"黑体"},{name:"绝绝字体",value:"Times New Roman"}//方式二// 字符串形式'黑体','仿宋','楷体','标楷体','华文仿宋','华文楷体','宋体','微软雅黑','Arial','Tahoma','Verdana','Times New Roman','Courier New',
]editor.create()

配置字号

编辑器的字号，可以通过 editor.config.fontSizes 配置。

const E = window.wangEditor
const editor = new E('#div1')editor.config.fontSizes = {'x-small': { name: '10px', value: '1' },'small': { name: '13px', value: '2' },'normal': { name: '16px', value: '3' },'large': { name: '18px', value: '4' },'x-large': { name: '24px', value: '5' },'xx-large': { name: '32px', value: '6' },'xxx-large': { name: '48px', value: '7' },
}editor.create()

【特别注意】上述配置中

  • key 的值（即 x-small small normal 等这些）不可改变，key 不可增加，只能减少。
  • value: '1 - 7' 也不可改变，也不可增加，只能减少。而且，value 和 key 必须对应起来，例如 small 就必须对应 2

因此，上述配置中，你只能修改 name 。但修改之后，不会生效，还需要做一些调整。

以 'large': { name: '18px', value: '4' } 这个举例。 编辑器设置这个 font-size ，会生成 <font size="4">...</font> 。所以，你还需要增加下面的 css 代，让 size="4" 对应到 font-size: 18px; 。

font[size="4"] {font-size: 18px;
}

编辑器页面需要该 css ，回显页面也需要该 css 。

配置行高

编辑器的行高，可以通过 editor.config.lineHeights 配置。

const E = window.wangEditor
const editor = new E('#div1')// 配置行高
editor.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3']editor.create()

配置表情图标

通过 editor.config.emotions 可配置表情图标。表情菜单的 panel 中，支持多 tab 。

const SINA_URL_PATH = 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal'const E = window.wangEditor
const editor = new E('#div1')editor.config.emotions = [{title: '新浪', // tab 的标题type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式content: [{ alt: '[坏笑]', src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png` },{ alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },{ alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },]},{title: 'emoji',  // tab 的标题type: 'emoji', // 'emoji' / 'image'// emoji 表情，content 是一个数组即可content: '												


											

wangeditor使用方法，上传图片/视频到七牛云相关推荐
	

    
								
  1. uniapp----上传图片或者视频到七牛云
		
    uniapp----上传图片或者视频到七牛云 该功能为借鉴微修(侵删) 1. 先封装七牛云,qiniuyunUploader.js (function () {// 请参考demo的index.js中 ...
    
		
    2. 
						
  2. 七牛切片视频php,七牛云6：付费视频防盗链－视频切片并通过AES128加密视频
		
    上一篇我们讲了通过七牛云的私有资源防止付费视频被盗链,今天我们学习一下七牛云的视频切片,并通过AES128进行加密. 视频切片 七牛云提供音视频切片接口以支持HLS(HTTP Live Streami ...
    
		
    3. 
						
  3. php小程序上传视频到七牛,小程序上传视频到七牛云的实践
		
    ❝ 好久没有更新推文了,这段时间也是在做一个小项目,一开始想的是人脸识别并上传视频到七牛云的,但是后来想想好像不用这个功能,但是我实现后才知道.所以就写一下上传的功能吧. ❞ 前言 大家都知道七牛云就 ...
    
		
    4. 
						
  4. php七牛分片上传_ThinkPHP实现JavaScript上传大视频到七牛云实例
		
    1.通过Composer安装七牛云PHP SDK,官方文档 2.后端核心代码如下: use Qiniu\Auth as Auth; use Qiniu\Config; use Qiniu\Storag ...
    
		
    5. 
						
  5. html播放七牛云视频,直传七牛云视频播放商业版【价值199元】
		
    福利:本资源正在众筹中,如贴内有下载链接则已众筹成功可下载资源,否则暂无资源,你可以在官方购买此资源后,用于[交换]魔趣吧内已发布的其他你需要的极品资源!这样你既可以买到自己想要的资源,又可以通过交换 ...
    
		
    6. 
						
  6. elementUI：el-upload分片上传大视频到七牛云
		
    使用el-upload请求方法的自定义 el-upload请求方法自定义官网的定义 七牛云官方的格式 详情看:七牛云JavaScript SDK 开始 其它的省略,就显示关于上传的部分 <el- ...
    
		
    7. 
						
  7. 微信小程序上传大视频到七牛云-附七牛优惠码
		
    最近接到一个微信小程序的项目,客户要求将小程序视频上传到七牛云,并且由我们进行维护,大概看了下客户的需求,视频文件应该不少,每个月的费用自然也不少,小编在充值的时候突然看到有个优惠码选项,便在网上一搜 ...
    
		
    8. 
						
  8. php上传视频到七牛云并切片转m3u8,在七牛云存储上播放 HLS
		
    在七牛云存储上播放 HLS HLS 是在移动端使用广泛的播放协议,可以用于直播,也可以用于点播.七牛云存储提供多种类型的视频文件向 HLS 的转换功能:音视频切片.同时,也提供了 m3u8 和 ts  ...
    
		
    9. 
						
  9. java上传视频到七牛云_使用SpringMVC上传视频到七牛云上
		
    最近做项目用到了七牛云存储,就讲一下如何使用springMVC对视频上传到七牛云上. Java SDK依赖的第三方库及其版本如下: 这个是使用maven管理的依赖. 也可以自己手动下载jar包通过这个 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. ERPLAB中文教程：创建与查看EventList
		
    2. 
						
  2. IQueryable和IEnumerable的区别
		
    3. 
						
  3. 微信小程序 通过云函数请求http网站接口
		
    4. 
						
  4. [Deepin - Pycharm调试记录] Pyinstaller索引系统库问题
		
    5. 
						
  5. HashMap底层理解（下）
		
    6. 
						
  6. FPGA实现CAN接口（SJA1000）
		
    7. 
						
  7. php eval 安全性,php – 使用eval解析表单输入的方程式的最安全的方法
		
    8. 
						
  8. III.Data Modeling and Aggregation(数据模型和整合)
		
    9. 
						
  9. 【原创】AE套用模板教程
		
    10. 
						
  10. 微信扫一扫扫描二维码带参
		
    11. 
						
  11. CSS3实现两头细中间粗的线(纵向)与一线两色\渐变线\文字投影\文字渐变等
		
    12. 
						
  12. 个人电脑bt文件服务器,简单实用 教你轻松架设个人BT服务器
		
    13. 
						
  13. 感知机（Perceptron）-《统计学习方法》例题对偶形式手算全过程
		
    14. 
						
  14. 关于孔明先生职称申请报告的回函
		
    15. 
						
  15. 香烟logo设计灵感 - logo设计公司 - ci设计
		
    16. 
						
  16. Kyligence 春季论坛成功举办，助力企业构建数字化管理新体系
		
    17. 
						
  17. Android开发经验谈：微信小程序的事件处理，灵魂拷问
		
    18. 
						
  18. via浏览器如何使用插件 Via浏览器添加使用插件教程
		
    19. 
						
  19. iOS开发之沙盒机制(SandBox)
		
    20. 
						
  20. 儿知错父之过下一句_第034章 子不教，父之过
		
    21. 
		

	


热门文章
	

    
									
  1. Unity3D - 图形性能优化
			
    2. 
						
  2. 仓储控制系统软件（WCS）
			
    3. 
						
  3. 在线播放bt php,yunBT：一个基于TP3.1的多用户BT离线下载程序，支持在线播放
			
    4. 
						
  4. vue项目中引入mint-ui的方式（全部引入与按需引入）
			
    5. 
						
  5. Python爬取京东回力鞋购买情况看看码数比例
			
    6. 
						
  6. 查漏补缺：Java10之后，var成为关键字了吗
			
    7. 
						
  7. ZooKeeper: Wait-free coordination for Internet-scale systems
			
    8. 
						
  8. 分享小黄豆CRM的截图
			
    9. 
						
  9. Java修道之路，问鼎巅峰，我辈代码修仙法力齐天
			
    10. 
						
  10. MySQL事务原理分析（ACID特性、隔离级别、锁、MVCC、并发读异常、并发死锁以及如何避免死锁）
			
    11.