1. 首页
  2. 文章中心
  3. wnagEditor

wangEditor入门使用（基础案例）

107 阅读 0 评论
我是靠谱客的博主 爱笑灯泡，这篇文章主要介绍wangEditor入门使用（基础案例），现在分享给大家，希望可以做个参考。

什么是富文本编辑器？

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器

  • 概念对比: 文本文档 =======》world
  • 常用的富文本编辑器：https://blog.csdn.net/davidhzq/article/details/100842866

wnagEditor 富文本编辑器

官网：http://www.wangeditor.com/

简介：轻量级 web 富文本编辑器，配置方便，使用简单，开源免费。支持 IE10+ 浏览器。

获取wnagEditor

  • 下载本地
复制代码
1
2
3
4
5
6
7

<!-- 引入依赖文件 -->
<!-- css -->
<link rel="stylesheet" href="/static/assets/plugins/wangEditor/wangEditor.min.css" />
<!-- JavaScript -->
<script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>
  • 在线链接
复制代码
1
2
3
4
5

<!-- 官网链接 -->
<!-- 只需要引用 JS，无需引用任何 CSS ！！！ -->
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>

启用wangEditor

只需要一个 div 元素，用 JavaScript 代码启用即可

复制代码
1
2
3

<div id="div"></div>
复制代码
1
2
3
4
5
6

var E = window.wangEditor
var editor2 = new E('#div')
// 或者 var editor = new E( document.getElementById('div') )
editor2.create()//创建

一个页面可创建多个编辑器

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="div1"></div>
<div id="div2"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var E = window.wangEditor
//第一个编辑器 
var editor1 = new E('#div1')
editor1.create()
//第二个编辑器 
var editor2 = new E('#div2')
editor2.create()
</script>

菜单栏和编辑栏区域可分离

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div3{
border: 1px solid #666;
}
#div4 {
/* height: 300px; */
min-height: 300px;
/*可使用 min-height 实现编辑区域自动增加高度*/
background-color: antiquewhite;
}
.item{
padding: 20px 0;
text-align: center;
background-color: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div id="div3"></div>
<p class="item">就这吧，分就分吧</p>
<div id="div4"></div>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script>
var E = window.wangEditor
var editor2 = new E('#div3','#div4')
editor2.create()
</script>
</body>
</html>

设置编辑栏初始内容

  • html方法
复制代码
1
2
3
4
5
6
7
8
9
10
11

<div id="div1">
<p>初始化的内容</p>
</div>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
</script>
  • js方法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="div1"></div>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
// 设置内容
editor.txt.html('<p>用 JS 设置的内容</p>')
// 追加内容 
editor.txt.append('<p>用 JS 追加的内容</p>')
// 清空内容
前提是编辑栏里有内容
editor.txt.clear('<p>用 JS 清空内容</p>')
// 都可以识别标签
</script>

获取编辑栏的内容

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<p></p>
</div>
<button id="but1">点击获取html</button>
<button id="but2">点击获取text</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script>
var E = window.wangEditor
var editor1 = new E('#div1')
editor1.create()
// 获取html
$('#but1').on('click',function(){
alert(editor1.txt.html())
})
// 获取text
$('#but2').on('click',function(){
alert(editor1.txt.text())
})
</script>
</body>
</html>

配置菜单栏、配置颜色、配置表情、配置字体

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script>
var E = window.wangEditor
var editor1 = new E('#div1')
//配置菜单栏
// 如果菜单栏宽度不够，建议精简菜单项。
editor1.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
// 配置颜色
editor1.customConfig.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff',
"#e5e5e5"
// 可自行添加
]
// 配置表情
// 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
editor1.customConfig.emotions = [{
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [{
alt: '[坏笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 数组
content: ['????', '????', '????', '????', '????']
}
// 可自行添加
]
// 配置字体
editor1.customConfig.fontNames = [
'宋体',
'微软雅黑',
'Arial',
'Tahoma',
'Verdana'
// 可自行添加
]
editor1.create()
</script>
</body>
</html>

使用textarea

复制代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<textarea name="" id="txt" style="width: 300px;height: 200px;"></textarea>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script>
var E = window.wangEditor
var editor1 = new E('#div1')
// 使用textarea
var $text1 = $('#txt')
editor1.customConfig.onchange = function (html) {
// 监控变化，同步更新到 textarea
$text1.val(html)
}
editor1.create()
// 初始化 textarea 的值
$text1.val(editor1.txt.html())
</script>
</body>
</html>

eg：就是实时监控输入的内容

开启本地图片tab、关闭网络图片tab

1
2
3
4
5
6
7
8
9

var E = window.wangEditor
var editor1 = new E('#div1')
//开启“本地图片”tab
editor1.customConfig.uploadImgShowBase64 = true
// 隐藏“网络图片”tab
editor1.customConfig.showLinkImg = false
editor1.create()

最后

以上就是爱笑灯泡最近收集整理的关于wangEditor入门使用（基础案例）的全部内容，更多相关wangEditor入门使用（基础案例）内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(71)

相关文章

wangeditor解决图片上传服务器后删除图片的问题
wangeditor解决图片上传服务器后删除图片的问题
vue-wangEditor 上传视频功能
vue-wangEditor 上传视频功能
@wangeditor/editor-for-vue ^5.1.12 富文本使用记录
@wangeditor/editor-for-vue ^5.1.12 富文本使用记录
vue3+wangeditor自定义上传图片视频
vue3+wangeditor自定义上传图片视频
wangEditor入门使用（基础案例）
wangEditor入门使用（基础案例）
vue插入音频视频
vue插入音频视频
.editorconfig配置
.editorconfig配置
wangEditor上传图片到本地
wangEditor上传图片到本地

评论列表共有 0 条评论

立即
投稿
返回
顶部