var E = window.wangEditor

var editor1 = new E('#div1') // 两个参数也可以传入 elem 对象,class 选择器

editor1.create()

请输入内容

3.此时会看到文本编辑器已经显示出来了

4.注意路径js路径 如果不正确就会显示不出来

5.给编辑器显示区写东西

editor1.txt.html('

用 JS 设置的内容

')

6.给编辑器清空东西

editor.txt.clear()

7.获取内容

获取html

获取text

document.getElementById('btn1').addEventListener('click', function () {

// 读取 html

alert(editor1.txt.html())

}, false)

document.getElementById('btn2').addEventListener('click', function () {

// 读取 text

alert(editor1.txt.text())

}, false)

8.菜单配置,创建editor之前

editor1.customConfig.menus = [

'head', // 标题

'bold', // 粗体

'fontSize', // 字号

'fontName', // 字体

'italic', // 斜体

'underline', // 下划线

'strikeThrough', // 删除线

'foreColor', // 文字颜色

'backColor', // 背景颜色

'link', // 插入链接

'list', // 列表

'justify', // 对齐方式

'quote', // 引用

'emoticon', // 表情

'image', // 插入图片

]

默认的菜单就是

[

'head', // 标题

'bold', // 粗体

'fontSize', // 字号

'fontName', // 字体

'italic', // 斜体

'underline', // 下划线

'strikeThrough', // 删除线

'foreColor', // 文字颜色

'backColor', // 背景颜色

'link', // 插入链接

'list', // 列表

'justify', // 对齐方式

'quote', // 引用

'emoticon', // 表情

'image', // 插入图片

'table', // 表格

'video', // 插入视频

'code', // 插入代码

'undo', // 撤销

'redo' // 重复

]

9.debug模式,创建editor之前

editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0

10.插入链接,创建editor之前

editor.customConfig.linkImgCallback = function (url) {

console.log(url) // url 即插入图片的地址

}

11.背景颜色

editor.customConfig.colors = [

'#000000',

'#eeece0',

'#1c487f',

'#4d80bf',

'#c24f4a',

'#8baa4a',

'#7b5ba1',

'#46acc8',

'#f9963b',

'#ffffff'

]

12.base64位上传图片

editor1.customConfig.uploadImgShowBase64 = true

大家觉得不错的话可以支持一下

wangeditor 最大字数_wangEditor的了解之路相关推荐

  1. wangeditor 最大字数_我为什么要做富文本编辑器【wangEditor5个月总结】

    本文是几年前写的,直接访问 wangEditor 官网 www.wangEditor.com 了解最新版的编辑器 ------------------------------------------- ...

  2. wangeditor 请求头_WangEditor 使用案例

    注:本篇文章的代码地址如下 本篇文章的目录: WangEditor 如何引入到项目中--前端 上传图片实现原理 图片上传接口实现--后端 总结 WangEditor 如何引入到项目中--前端 对于一个 ...

  3. wangeditor 请求头_wangEditor编辑器添加上传视频功能

    正在帮一个朋友的项目进行一些修改,该项目中使用的是 wangEditor 富文本编辑器. 该编辑器的上传视频有个缺陷,不能手动上传,这是目前的效果图 朋友要求加一个上传视频的功能. 网上的解决方案的文 ...

  4. WangEditor富文本编辑器图片上传踩坑之路

    最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...

  5. css wangeditor 修改_wangEditor

    wangEditor富文本编辑器是一款基于javascript和css开发的 Web编辑器, 轻量.简洁.易用.开源免费,对于富文本编辑器来说,也是20%的功能满足80%的需求,剩下的80%的功能只是 ...

  6. 从程序员到架构师的最佳技术成长之路

    我把程序员到架构师的技术成长之路分为几个典型的阶段:工程师 - 高级工程师 - 技术专家 - 初级架构师 - 中级架构师 - 高级架构师,总的成长原则是每个阶段都需要"积累经验.拓宽视野.深 ...

  7. BILIBILI 高并发实时弹幕系统的实战之路 | 架构师实践日

    B 站直播弹幕服务架构(下面简称 GOIM )的出现就是为了解决这一系列的需求.下面将对此进行详细的介绍. B 站直播弹幕服务架构 GOIM 的出现 图  1 直播聊天系统本质上也是一种推送系统,所谓 ...

  8. 消费消息删除_【进阶之路】可靠消息最终一致性解决方案

    导言 大家好,我是南橘,从接触java到现在也有差不多两年时间了,两年时间,从一名连java有几种数据结构都不懂超级小白,到现在懂了一点点的进阶小白,学到了不少的东西.知识越分享越值钱,我这段时间总结 ...

  9. “云端一体”的智能媒体生产制作演讲之路

    正文字数:13220  阅读时长:12分钟 智能媒体生产制作的链路当中,生产制作是核心,智能是辅助,那么AI技术是如何融入在整个生产制作流程当中的?阿里云智能视频云 高级技术专家 邹娟在LiveVid ...

最新文章

  1. 搭建私有npm私库(使用verdaccio)
  2. Linux下启动和关闭Oracle数据库的方法
  3. 今日头条|张一鸣:我遇到的优秀年轻人的5个特质
  4. Makefile中的分析(一)
  5. php jquery grid,jQuery Grid
  6. iOS App版本号compare
  7. SpringBoot-MyBatis
  8. SAP Fiori ButtonRenderer
  9. “程序员千万不要选全栈开发”
  10. PHP+MySQL 注射资料
  11. 回车,换行,转义字符“\r”,“\n”是什么关系?
  12. 有限项加和的极限求解思路定式
  13. .Net remoting, Webservice,WCF,Socket区别
  14. CSS从大图片上截取小图标的使用
  15. 科研ABC - 会议海报制作
  16. layui树形美化_使用layui-tree美化左侧菜单,点击生成tab选项
  17. 系统wmi服务器,wmi的服务器实时监控系统
  18. Win7任务管理器进程一直在跳动选中不了的处理方法
  19. 联想一键恢复系统教程
  20. 全面剖析:“外包”浪潮以及程序员应对攻略

热门文章

  1. day20Java-Thread-多线程中生产者和消费者
  2. 记一次APK反编译,拿到自己想要的API过程及应用
  3. matlab计算混淆矩阵及kappa系数
  4. 06.计算机高级语言
  5. 基于Vshare插件实现vue分享功能
  6. html parent()属性,HTML DOM parentElement用法及代码示例
  7. Laravel Excel文件模板导出
  8. JavaScript常用节点类型
  9. 写代码神器,新款苹果AirPods Pro耳机太爽了,包邮送一个!
  10. 程序员 论坛 常见 英文缩写