百度编辑器案例课件.docVIP

Ueditor编辑器的使用和配置案例 什么是Ueditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码... 功能全面：涵盖流行富文本编辑器特色功能，独创多种全新编辑操作模式 用户体验：隐蔽各种浏览器之间的差异，提供良好的富文本编辑体验 开源免费：开源基于MIT协议，支持商业和非商业用户的免费使用和任意修改 定制下载：细粒度拆分核心代码，提供可视化功能选择和自定义下载 专业稳定：百度专业QA团队持续跟进，上千自动化测试用例支持 注： MIT许可协议（The MIT License）是许多软件授权条款中，被广泛使用的其中一种。与其他常见的软件许可协议（如GPL、LGPL、BSD）相比，MIT是相对宽松的软件许可协议。 Ueditor配置 1、引入Ueditor script id=container name=content type=text/plain ??里写你的初始化内容 /script !-- 配置文件 -- script type=text/javascript src=ueditor.config.js/script !-- 编辑器源码文件 -- script type=text/javascript src=ueditor.all.js/script !-- 实例化编辑器 -- script type=text/javascript var ue = UE.getEditor(container); /script 见插件包index.html 2、自定义参数项 编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器： var ue = UE.getEditor(container, { autoHeight: false}); 3、设置或读取编辑器内容 通 getContent 和 setContent 方法可以设置和读取编辑器的内容 var ue = UE.getContent();//对编辑器的操作最好在编辑器ready之后再做 ue.ready(function() { //设置编辑器的内容 ue.setContent(hello); //获取html内容，返回: phello/p var html = ue.getContent(); //获取纯文本内容，返回: hello var txt = ue.getContentTxt();}); 配置说明 配置说明 下面介绍上传相关的配置项以及需要注意的点，更多配置项请移步 后端配置项说明 4.1 上传路径配置 1.4.2+ 以后路径配置主要相关的配置项是 PathFormat 和 UrlPrefix 的配置项 图片上传：imagePathFormat、imageUrlPrefix 涂鸦上传：scrawlPathFormat、scrawlUrlPrefix 截屏上传：snapscreenPathFormat、snapscreenUrlPrefix 附件上传：filePathFormat、fileUrlPrefix 视频上传：videoPathFormat、videoUrlPrefix 4.2 给返回路径的添加前缀 通过在 php/config.json 文件，配置 imageUrlPrefix 可以给返回的路径添加指定的前缀。 编辑器和图片地址同域的情况下，可以直接使用后台返回的路径，不需要额外配置前缀 假如编辑器和图片不在一个域名下，需要给返回路径添加域名前缀，可以设置 imageUrlPrefix 配置项为 http://img.domain，这时插入编辑器的图片会是这样： http://img.domain/ueditor/php/upload/2014/06/06/123.jpg 4.3 上传文件大小限制 上传大小配置可通过 php/config.json 文件，里面的 imageMaxSize 参数值（单位为B），控制上传文件大小。当上传超出了大小会向前端包“超出大小”的错误。 由于前端可以拿到后端配置项，也可以判断文件大小，在上传之前就可以控制超出大小的文件，并提示错误信息。 另外，有些服务器对上传文件，会有默认的上传大小限制，需要检查上传文件大小配置值是否足够大。例如：php 服务器需要修改 php.ini 里面的上传大小限制和post表单大小限制。 4.4 上传文件格式控制 上传文件后缀类型限制，可通过 php/config.json 文件，里面的 imageAllowFiles