欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简洁富文本编辑器wangEditor解析

程序员文章站 2024-02-24 23:15:28
简洁富文本编辑器wangeditor 创建方式有两种,非常简单 第一种:直接创建 html: 欢迎使用 wangeditor 富文本编辑器 js: // 引用 var e = requi...

简洁富文本编辑器wangeditor

创建方式有两种,非常简单

第一种:直接创建

html:

欢迎使用 wangeditor 富文本编辑器

js: // 引用 var e = require('wangeditor') // 使用 npm 安装 var e = require('/wangeditor.min.js') // 使用下载的 // 创建编辑器 var editor = new e('#editor') editor.create()

第二种:功能栏和编辑窗口分开创建

    

 

中间隔离带

请输入内容

<script type="text/javascript" src="/wangeditor.min.js"></script><script type="text/javascript"> var e = window.wangeditor var editor1 = new e('#p1', '#p2') // 两个参数也可以传入 elem 对象,class 选择器 editor1.create() </script>

这里的引用只需要引用wangeditor.min.js或者wangeditor.js中的一个就行了,css不用引入

禁用编辑功能:

editor.$textelem.attr('contenteditable', false)

设置内容:

editor.txt.html('

用 js 设置的内容

')

获取内容:

editor.txt.html()

追加内容:

editor.txt.append('

追加的内容

')

清空内容:

editor.txt.clear()