[成都|荣耀师兄]JS-左少华|2017年03月28日的日报-技能树.IT修真院

发表于： 2017-03-28 22:15:04

1 1064

今天完成的事情：

呜呜呜，国足又输球了，不开心。

一整天都在折腾任务10，主要是富文本编辑器的使用，这个任务中使用的是UMeditor；

表单验证做了一点点；

明天计划的事情：

继续表单验证，然后点击提交按钮时，将表单中所有内容包括富文本编辑器中的内容一起提交；

另外编辑器的图片上传功能不能用，总是提示上传失败，再摸索下；

遇到的问题：

UMeditor编辑器的图片上传总是提示失败；

修改UMeditor碰到的问题，无法修改样式，从调试工具发现是element.style加的；

可以通过css中的 !important 语法优先权来实现我们想要的效果。

收获：

1. 使用CSS时标签ID不能以数字开头

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen(连字符 - ) followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

2. 有哪些方法可以实现垂直居中？

○ 1.单行文字垂直居中使用LINE-HEIGHT属性

○ 2.使用VERTICAL-ALIGN属性实现居中

○ 3.使用TABLE-CELL布局

○ 4.使用PADDING和MARGIN

○ 5.使用TABLE布局

○ 6.使用FLEX弹性布局

○ 设置父元素display:flex，使用align-items:center

○ 7.使用绝对定位

○ 绝对定位后设置top和left为50%，然后设置负边距

○ 8.使用DISPLAY:-WEBKIT-BOX

○ 在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。content 清除浮动，并显示在中间。

3. 富文本编辑器比较

有关富文本编辑的知识介绍在高程438页有讲述；

w3school上关于frameset和iframe的介绍：

</frameset>

iframe 用于在网页内显示网页。

上面的例子会生成一个宽为固定的 100 像素的列，然后再生成另一个框架列，该列会占据框架集中其余所有的空间。

富文本技术的本质是：在页面中嵌入一个包含空HTML页面的iframe.

方法：设置designMode属性为on，必须在页面完全加载后才能设置这个属性。

第二种方式是使用contenteditable属性,可以应用在任何元素上。

各种插件及优缺点：

（1）wangEditor

基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。

官网与其他做的对比：

与国产编辑器百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。

与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。

它还会根据使用者的反馈不断完善，未来将支持移动版。

（2）UEditor

是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码.

涵盖流行富文本编辑器特色功能，独创多种全新编辑操作模式。

屏蔽各种浏览器之间的差异，提供良好的富文本编辑体验。

开源基于MIT协议，支持商业和非商业用户的免费使用和任意修改。

细粒度拆分核心代码，提供可视化功能选择和自定义下载。

百度专业QA团队持续跟进，上千自动化测试用例支持。

（3）KindEditor

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

快速：体积小，加载速度快

开源：开放源代码，高水平，高品质

底层：内置自定义 DOM 类库，精确操作 DOM

扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能

风格：修改编辑器风格非常容易，只需修改一个 CSS 文件

兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera。

（4）UMeditor（UEditor Mini版）

简称UM,是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧，贴吧每天几亿的pv是对UM各种指标的最好测试平台。当然随着代码的减少，UM的功能对于UE来说还是有所减少，但我们经过调研和大家对于UM提出的各种意见，提供了现在UM的功能版本，虽然有删减，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。让UM能在功能和体积上达到一个平衡。UM还会提供 CDN方式，减少大家部署的成本。我们的目标不仅是要提高在线编辑的编辑体验，也希望能改变前端技术中关于富文本技术的门槛，让大家不再觉得这块是个大坑。