-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathueditor-demo.html
192 lines (171 loc) · 6.96 KB
/
ueditor-demo.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="third-party/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
<!-- <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script> -->
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
div {
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<h3 style="font-size: 50px;">ok</h3>
<span>呵呵</span>
<div class="section">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</div>
<div id="demo"></div>
<code id="testcon" style="display:none;">
<section><h1>hello lzx</h1></section>
</code>
<div>
<h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div id="test"></div>
<button type="button" id="btn">获取内容</button>
<button type="button" id="preview">预览</button>
<script type="text/javascript">
/**
* 1. https://ueditor.baidu.com/website/download.html
*
* 2. npm i & npx grunt default
*
* 3. ,retainOnlyLabelPasted: true
,pasteplain:true //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
,'filterTxtRules' : function(){
function transP(node){
node.tagName = 'p';
node.setStyle();
}
return {
//直接删除及其字节点内容
'-' : 'script style object iframe embed input select',
'p': {$:{}},
'br':{$:{}},
'div':{$:{}},
'li':{$:{}},
'caption':{$:{}},
'th':{$:{}},
'tr':{$:{}},
'h1':{$:{}},'h2':{$:{}},'h3':{$:{}},'h4':{$:{}},'h5':{$:{}},'h6':{$:{}},
'td':function(node){
//没有内容的td直接删掉
var txt = !!node.innerText();
if(txt){
node.parentNode.insertAfter(UE.uNode.createText(' '),node);
}
node.parentNode.removeChild(node,node.innerText())
}
}
}()
4. .defaultfilter return
*
*
*/
var util = {
replacePairs: function() {
var str = arguments[0]
for (var i = 1; i < arguments.length; ++i) {
var re = new RegExp(arguments[i][0], 'g')
str = str.replace(re, arguments[i][1])
}
return str
},
/**
* 字符串替换为HTML编码形式
* @param {string} str 字符串
* @return {string}
*/
toHtml: function(str) {
var CONVERT_ARRAY = [
['&', '&'],
[' ', ' '],
["'", '''],
['"', '"'],
['/', '/'],
['<', '<'],
['>', '>'],
['\\\\', '\'],
['\n', '<br />'],
['\r', '']
]
return this.replacePairs.apply(this, [str].concat(CONVERT_ARRAY))
},
toHtml2: function(str) {
var CONVERT_ARRAY = [
['&', '&'],
[' ', ' '],
[''', "'"],
['"', '"'],
['/', '/'],
['<', '<'],
['>', '>'],
['\', '\\\\'],
['<br />', '\n']
]
return this.replacePairs.apply(this, [str].concat(CONVERT_ARRAY))
}
}
var s = `<div>
<h1>hello</h1>
</div>`
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
$(function() {
var ue = UE.getEditor('editor', {
initialFrameHeight: 250,
})
ue.ready(function() {
var s = `<div id='a'><h2 style="color:blue;">ok</h2><h3 style="color: #f00;">haod1</h3>
<p style="font-size: 60px;">666</p>
<div style="text-align:center;">999</div>
</div>`
ue.setContent(s)
// ue.execCommand('insertHtml', $('#container').html())
// ue.execCommand('insertHtml', s)
ue.execCommand('insertHtml', $('#testcon').html())
ue.execCommand('insertHtml', '<span>123</span>')
ue.execCommand('insertHtml', '<div>酷酷酷</div>')
$('#preview').click(function() {
var t = ue.getContent()
console.log(t)
ue.execCommand('insertHtml', t)
})
})
$('#demo').html(s)
$('#btn').click(function() {
console.log(ue.getContent())
})
ue.addListener('blur', function() {
console.log(ue.getContent())
var s = util.toHtml2(ue.getContentTxt())
console.log(s)
console.log(ue.getContentTxt())
// ue.execCommand('insertHtml', s)
ue.setContent(s)
$('#test').html(s)
})
})
</script>
</body>
</html>