forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2018-06-08-D组-JS10.html
377 lines (325 loc) · 17.9 KB
/
2018-06-08-D组-JS10.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./css/zenburn.css">
<style>
.float {
float: left;
}
</style>
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal default center" role="application" data-transition-speed="slow" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
<section class="past" style="top: 158px; display: none;" hidden="" aria-hidden="true">
<h3>【JS-task8】如何使用富文本编辑器-wangEditor？</h3>
<p>分享人：冯亚超</p>
</section>
<section class="past" style="top: 3px; display: block;" hidden="" aria-hidden="true">
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>1.背景介绍</h3>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。</p>
<p>富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等。</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>2.知识剖析</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>wangEditor富文本编辑器</h4>
<p>基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费</p>
<p>与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。 它还会根据使用者的反馈不断完善，未来将支持移动版。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>使用方法</h4>
<p>因为wangEditor是轻量的,所以不需要引入任何的CSS,只需要引入一个脚本文件
//unpkg.com/wangeditor/release/wangEditor.min.js</p>
<p>在JS中定义:</p>
<p>var E = window.wangEditor</p>
<p>var editor = new E('#editor')</p>
<p>editor.create()</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>3.常见问题</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>wangEditor都有哪些用法?</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>4.解决方案</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>wangEditor的功能</h4>
<p>1、菜单和编辑区域分离</p>
<p>如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。</p>
<p>这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>2、单页面多个编辑器</p>
<p>wangEditor 支持一个页面创建多个编辑器</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>3、内容</p>
<p>创建完成编辑器后,可以在编辑器中直接添加内容,也可以自定义一些内容,例如创建编辑器之后，可使用editor.txt.append('内容')继续追加内容。</p>
<p>editor.txt.clear()用来清除编辑器中的内容</p>
<p>可以html和text的方式读取编辑器的内容</p>
<p>可以通过editor.txt.getJSON获取 JSON 格式的编辑器的内容</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>4、上传图片</p>
<p>默认情况下，编辑器不会显示“上传图片”的tab,需要手动配置上传图片的信息。</p>
<p>同样的,也可以隐藏“网络图片”tab</p>
<p>base64格式保存图片</p>
<p>上传图片到服务器</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>5、参数配置</p>
<p>自定义菜单</p>
<p>debug 模式</p>
<p>配置 onchange 函数</p>
<p>自定义配置</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>5.编码实战</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>6.扩展思考</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>wangEditor有什么缺点?</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>7.参考文献</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<a href="https://www.kancloud.cn/wangfupeng/wangeditor3/338872">wangEditor3使用手册</a><br/>
<a href="https://www.sojson.com/blog/34.html">各种Editor对比，我选择wangEditor，wangEditor下载</a><br/>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>8 更多讨论</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>各种Editor对比</h4>
<p>KingEditor：</p>
<p>优点：外观简洁，功能很清楚，plugin目录很清楚，代码很规范。用起来还是很不错的。</p>
<p>缺点：插入代码有问题，不能很好的可见即所得，就是感觉缺少点与时俱进的感觉。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>CKEditor：</p>
<p>优点：外观简洁。</p>
<p>缺点：繁重、JS引用很多，不是很了解的人，根本分不清楚那些是对自己有用，哪些是没用，没有想KingEditor那样每个plugin都一个目录，导致一些初学者引用很多JS，CSS，加载很慢。API不明确，各种Iframe，跨域。反正感觉各种不好用。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>百度ueditor：</p>
<p>优点：其实还不错，毕竟是大公司做出来的，外观、功能、多语言支持都很好，尤其是PHP。</p>
<p>缺点：繁重、耦合度很高，针对每个语言都做不同的版本。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>bootstrap-wysiwyg、simditor：</p>
<p>优点：bootstrap-wysiwyg，simditor都还不错，风格、一直有更新。</p>
<p>缺点：文档和资料方面CN版本较少，目前使用者较少。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>wangEditor：</p>
<p>优点：作者一直有更新，并且有QQ群： 164999061，github，作者能及时的回答问题。有一点非常赞的一点，代码注释非常好。并且有区分开发和上线提示，并且判断Console日志输出。</p>
<p>缺点：缺少各种功能Demo，KingEditor这点做的很好。需要一定的功底方能更好的使用，好在作者代码注释写的很全。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<small>by: 冯亚超</small>
</section>
</div>
<div class="backgrounds"><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background stack present" data-loaded="true" style="display: block;"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 260.19px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left enabled" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up enabled" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">
语法：
return[()[expression][]];
可选项 expression 参数是要从函数返回的值。如果省略，则该函数不返回值。
用 return 语句来终止一个函数的执行，并返回 expression 的值。如果 expression 被省略，
或在函数内没有 return 语句被执行，则把值 undefined 赋给调用当前函数的表达式。
</div></div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
// history: true,
transition: 'default',
transitionSpeed: 'slow',
dependencies: [
{src: '../plugin/markdown/marked.js'},
{src: '../plugin/markdown/markdown.js'},
{src: '../plugin/notes/notes.js', async: true},
{
src: '../plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
// 原始类型对象直接赋值不会相互影响
// var a = 1;
//
// var b = a;
// b = 10;
// console.log(a); // 1
////
// var a = 'hello';
// var b = a;
// b = 'world';
// console.log(a); // hello
//
// var a = true;
// var b = a;
// b = false;
// console.log(a);
//数组浅复制
// var a = ['隔壁老王','冠希哥', '宋经理' //定义一个名为a的属猪，里面有3个值，
// ];
// var b = a; //定义一个变量b，把a赋值给他，这样比、b和a一样了
// b[2] = '冲冲老师'; //然后把b的第三个值等于冲冲老师
// console.log(a)//那么现在打印a 是什么结果呢
//
// var arr = ["One","Two","Three"]; //数组的深复制，slice方法
// var arrtoo = arr.slice(1);
// arrtoo[2] = "set Map";
// console.log(arr);//One,Two,Three
// console.log(arrtoo);//One,set Map,Three
//
// var arr1 = ["One","Two","Three"]; //数组的深复制，concat 方法
// var arrtooo = arr1.concat(111111);
// arrtooo[1] = "set Map To";
// console.log(arr1);//One,Two,Three
// console.log(arrtooo);//One,set Map To,Three
//
// var b=[1,2,3,4,5]; //concat的链接
// var c=[6,7,8,9];
// var d =[4,4,22]
// console.log(b.concat(c,d))
var a = {name: 'yy', age: 26}; //对象的浅拷贝哦
var b = new Object();
b.name = a.name;
b.age = a.age;
b.name = 'xx';
console.log(a);//Object { name="yy", age=26}
console.log(b);//Object { name="xx", age=26}
var d = { //对象的浅拷贝哦 第一种
name: 'd',
oc: {
age: 32
},
oad: {
adds: {
bb: 12
}
}
};
var deepCopy = function (source) {
var result = {};
for (var key in source) {
result[key] = typeof source[key] === 'object' ? deepCopy(source[key]) : source[key]
}
return result
};
var c = deepCopy(d);
c.name = 'c';
c.oc = {
age: 49
};
console.log(c);
console.log(d);
// var person = { //第二种深拷贝
// name: 'aa',
// friends: ['da', 'dsa', 'gf']
// };
//
// var aPerson = Object.create(person, {
//// name: {
//// value: "gee"
//// }
// });
//
// console.log(person.name);
// console.log(aPerson.friends)
var Chinese = {
nation: '中国'
}
var Doctor = {
career: '医生'
}
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
console.log(Doctor); // 中国
Chinese.birthPlaces = ['北京', '上海', '香港'];
var Doctor = extendCopy(Chinese);
Doctor.birthPlaces.push('厦门');
</script>
</body>
</html>