网页flash文本抓取器(一枚纯洁善良的WEB前端程序员官网任务任务10相关内容)

　　网页flash文本抓取器(一枚纯洁善良的WEB前端程序员官网任务任务10相关内容)

　　大家好，我叫王奎之，是it学院成都分院三期的学生。我是一个诚实、纯洁、善良的网络前端程序员

　　今天，我想在学院官网上与大家分享JS任务10的相关内容，以及如何使用富文本编辑器

　　1.背景

　　在制作web应用程序时，经常进行富文本编辑。常见的富文本编辑器有很多，如cuteditor、ckeditor、niceditor、kindeditor、ueeditor等，一个好的富文本编辑器可以让我们的用户有更好的体验效果，带来更多的用户赞誉

　　这里我们推荐百度推出的ueeditor。Ueeditor是百度“Fex前端研发团队”开发的所见即所得富文本网页编辑器。它是轻量级的、可定制的、面向用户体验的、开源的。它基于MIT协议，允许免费使用和修改代码

　　2.知识分析

　　1、start使用ueeditor

　　2、自定义您自己的工具栏

　　3、UEditor简单初始化设置

　　知识点1：开始使用ueeditor

　　（1）UEditor内容：

　　下载编辑器并解压缩。部署包解压缩文件的目录结构如下

　　

　　项目结构

　　对话框：弹出对话框对应的资源和JS文件

　　Lang：编辑器显示的文件

　　主题：样式图片和样式文件

　　第三方：第三方插件（包括代码高亮显示、源代码编辑等组件）

　　Ueeditor.all.js：开发版本代码合并的结果，目录中所有文件的包文件

　　Ueeditor.config.js：编辑器的配置文件，建议放在与编辑器实例化页面相同的目录下

　　（2）UEditor部署：

　　

　　HTML中引入了配置文件ueditor.config.js、源文件ueditor.all.js和jQuery库

　　导入JS文件

　　（3）实例化ueeditor:

　　到目前为止，已经根据默认配置成功部署了UE富文本编辑器

　　知识点2：自定义自己的工具栏

　　ueeditor工具栏上的按钮列表可以自定义，只需修改配置项即可实现需求

　　如何修改配置项：

　　1.method 1:修改ueeditor.config.js中的工具栏

　　

　　2.method 2：实例化编辑器时传入Toolbar参数

　　

　　知识点3：ueeditor的简单初始化设置

　　常用初始设置：

　　//选择焦点时，初始化内容将自动清除

　　autoClearinitialContent:true

　　//关闭字数计数

　　没错

　　//闭合元素路径

　　elementPathEnabled:true

　　//默认编辑区域高度

　　初始帧高度：200

　　//有关更多其他参数，请参阅ueeditor.config.js中的配置项

　　初始帧宽度：300

　　//默认编辑区域宽度

　　3.常见问题

　　问题1：为什么接口在创建实例后直接报告错误

　　问题2：div标记自动转换为p标记

　　4.溶液

　　问题1：为什么接口在创建实例后直接报告错误

　　在创建编辑器时，开发人员将执行一些接口或调用编辑命令，例如

　　varue=UE.getEditor（'editor'）

　　UE.Setcontent（'初始化内容'）

　　//或者调用命令

　　//Execcommand（'inserthtml'，'content'）

　　这些代码似乎没有问题，编辑器实例可以正确获得，但没有效果

　　其实这个问题是因为我们不了解ueditor的创建原理造成的，因为ueditor的编辑区域使用iframe作为编辑容器，编辑器创建实例后，会先创建一个iframe元素，然后在iframe元素中写一些脚本，当iframe元素初始化完成

　　该脚本主要用于将iframe中的body、window和document对象的引用分配给editor实例，从这里可以看出，ueeditor的初始化过程实际上是一个异步过程

　　由于这是一个异步过程，因此场景中的写入方法会出现问题。虽然工厂方法geteditor可以正确返回编辑器实例，但同步代码ue.setcontent将立即执行，因为setcontent在编辑容器中写入内容。此时，body和d等元素需要使用文档，但这些元素的引用分配仅在异步进程值中完成。这就是为什么在直接执行setcontent时出现无效问题的原因。当然，有时不同的浏览器具有不同的效果。一些高级浏览器，如chrome，有时可以，但大多数IE浏览器不能。th主要是由于浏览器的性能。正确的方法是什么

　　Ueeditor为开发人员提供了一个现成的接口。它将在编辑器的所有初始化操作完成时调用。它确保您要执行的操作可以在完整的初始化环境中执行

　　UE.getEditor（'editor'）.ready（函数（）{

　　//这是当前创建的编辑器实例

　　This.Setcontent（'content'）

　　})

　　问题2：div标记自动转换为p标记

　　背景：刚开始使用ueeditor的开发人员会发现一个现象。如果粘贴到编辑器中的内容有一个div标记，粘贴到编辑器后，他们会发现粘贴到编辑器中的div已转换为p标记

　　原因：首先，这不是一个bug，这是ueeditor对进入编辑器的数据进行过滤的过程，在ueeditor中，段落的标签是p标签，很多编辑操作都是基于p标签的

　　解决方案：

　　UE.getEditor（'editorID'{

　　allowDivTransToP:false

　　})

　　5.编码实践

　　

　　6.扩展思维

　　如何向编辑器添加事件

　　Ueeditor有许多内置方法，例如

　　UE.Isfocus（）；//判断编辑器是否获得焦点

　　UE.Hascontents（）；//判断是否有内容

　　7.references

　　Ueeditor文档

　　8.更多讨论

　　讨论1：编辑器是开源的。你可以参考编写自己的富文本编辑器吗

　　这很困难，并且考虑了许多问题，例如浏览器兼容性

　　讨论2：ueeditor的二次开发

　　这比前者要简单。你可以参考官方网站

　　如何使用富格文本编辑器-腾讯视频编辑器

　　视频链接

　　今天的分享到此为止。欢迎您喜欢、转发、留言和制作砖块~

　　------------------------------------------------------------------------------------------------------------------------

　　技能树，It学院

　　“我们相信每个人都可以成为一名工程师。从现在开始，找一位师兄来介绍你，控制你的学习节奏，不要在学习过程中感到困惑。”

　　这是技能树。IT学院。成千上万的师兄在这里找到了自己的学习路线。学习是透明的，成长是可见的。师兄们有*敏*感*词*的免费指导。来和我一起学习吧

　　猛撞