使用ueditor小结
1. 导入
js:
ueditor.config.js
ueditor.all.js css/images/plugin:
themes
lang
dialog(可选)
third-party(可选) 2. 配置
修改 ueditor.config.js 的 UEDITOR_CONFIG a. 定义 themes, lang, third-party 的路径,如果是在同一文件夹下,定义 UEDITOR_HOME_URL 就可以了
否则分别修改 themePath, langPath, UEDITOR_HOME_URL
b. 定义工具栏 toolbars
simpleupload : 简单上传:点击按钮,直接选择文件上传
insertimage : 插入图片,会呼起弹窗
c. 其它配置(只列出修改的几条,更多见文档:http://ueditor.baidu.com/doc/)
initialFrameHeight : 编辑器默认高度
enableContextMenu : 右键菜单开关
enableAutoSave : 是否自动保存
topOffset : 工具栏悬浮时 top 值
imageScaleEnabled : 图片压缩开关
elementPathEnabled : 启用元素路径开关
catchRemoteImageEnable : 远程抓取图片开关
iframeCssUrl : 富文本 iframe 中导入的 css 外链文件
wordCount : 字数统计开关
d. 插件
simpleupload : 简单上传:点击按钮,直接选择文件上传
修改上传接口和回调函数,修改接口可以统一在 getActionUrl 中定义,下同
insertimage : 插入图片,会呼起弹窗
修改上传接口和回调函数
autoupload : 拖放文件到编辑区域,自动上传并插入到选区
修改上传接口和回调函数
catchremoteimage : 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片
修改上传接口和回调函数
catcherFieldName : 上传接口中的 form name
catcherLocalDomain : 定义不做替换的图片 domain
e. 自定义按钮
参见:http://fex.baidu.com/ueditor/#dev-developer
3. 遇到的问题
a. 想在富文本中插入一个自定义结构,独立模块,不可编辑,不可部分删除
参考微信公众号,插入一个 iframe,子 iframe 中加 onclick,点击时选中子 iframe(ie, ff 无法选中)
b. 插入图片后只显示一半,编辑器高度没有自动变化,focus 时才撑高
插入图片后 fire: me.fireEvent("contentchange");
c. simpleupload 没有 title
找到 initUploadBtn ,给 input 加个 title
d. 想在工具栏和富文本 iframe 中间插入一些内容
参考微信公众号,在 EditorUI.prototype 的 getHtmlTpl 中插入
e. http 请求多个 css 文件,而且是用 js 异步加载的,会出现临时样式不对的情况
将需要的 css 合并压缩成一个文件,在 head 引入,去掉 UE.ui.Editor 中用 js 引入 css 的部分
f. 在 IE 下 iframeCssUrl 指定的文件加载了,但竟然不生效也是醉了
直接在 Editor.prototype 的 render 中写入样式
使用ueditor小结的更多相关文章
- 百度富文本ueditor使用小结
最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下. 1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/ 2.h ...
- ueditor使用小结
一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/webs ...
- ueditor使用小结【来源网络】
原文地址:http://www.cnblogs.com/janes/p/5072496.html ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website ...
- Node + Express + Mysql的CMS小结
因为之前用过上述的组合完成过很多系统,而这一次是为了实现一个帮助系统的静态网页发布.因为很久不写,重点说遇到的几个坑: 1.库版本的问题 比如mysql连接数据库一直报错,因为系统重装过,所以重新安装 ...
- ueditor编辑器使用总结
ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.ba ...
- Ueditor设置默认字体、字号、行间距,添加字体种类(转)
Ueditor默认字体.字号.行间距的修改: ueditor默认字号是16号,默认字体为sans-serif,默认行间距为5px,如下图所示: 首先,修改ueditor.all.js文件中如上图红框中 ...
- Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式
最近,硬是和百度的UEditor组件杠上了.自己的个人官网项目,很容易就搞定了,公司的项目,尼玛,各种问题.项目多了,环境复杂了,解决问题的方法也得不断调整. 项目用Maven管理jar包,用到了UE ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
随机推荐
- h5专题应该兼容那些浏览器?
本人做专题还不算很多,但是也很腻烦了.一般一个专题制作也就3天,可是调试得4/5天.除了销售客户各种无休止的改改改.还有一点很重要就是浏览器的兼容性.刚开始做专题的时候天真的以为苹果只要兼容到ipho ...
- 【概念笔记】JavaEE - web part1
IT`huhui前言录 想对学习的内容进行下简易的总结方便自己回头复习. 但是还有很多地方是不完善的需要慢慢修改. 持续更新. Web 服务器 IIS 微软主推 Apache C写的 Tomcat j ...
- 【Python之路Day12】网络篇之Paramiko
paramiko模块,基于SSH用于连接远程服务器并执行相关操作. 一.安装 pip3 install paramiko 二.使用 1. SSHClient 用于连接远程服务器并执行基本命令 基于用户 ...
- SQLSERVER监控复制并使用数据库邮件功能发告警邮件
SQLSERVER监控复制并使用数据库邮件功能发告警邮件 最近熬出病来了,都说IT行业伤不起,不说了,说回今天的正题 正题 上个月月底的时候因为要搬迁机房,需要将一个数据信息数据库先搬到我们的机房,然 ...
- 解决linux下oracle-11g打不开dbca问题
linux下oracle安装完毕后,出现建立数据库命令dbca无法使用问题,如图: 解决办法: 在32位的linux环境下,安装32位oracle11g会有这个bug,主要装个补丁(patch nam ...
- [MSSQL2005]再看CTE
个人认为CTE最大的做点是可以处理树状存储的数据了 例如类似这样设计的数据表,ID,ParentID这样的设计使用CTE就非常方便,原因就是CTE可以自引用,达到类似递归的效果 那么问题来了,如何使用 ...
- glyphicons-halflings-regular.woff 404
此乃服务器不支持这种文件,因此需要修改一下配置,让IIS支持这种文件的访问 <system.webServer> 下增加节点: <staticContent> <rem ...
- tomcat安全配置
1. 注释或删除 tomcat-users.xml 所有用户权限,看上去如下: <tomcat-users></tomcat-users> 2. 隐藏tomcat版本信息 1 ...
- SQL中order by;group up;like;关联查询join on的用法
排序order by的用法: 1.order by 字段名1 asc/desc, 字段名2 asc/desc,... 先按照字段名1的升序/降续给表进行排列 然后 按照字段名2的升序/降续给表进行排列 ...
- GCD使用dispatch_semaphore_t创建多线程网络同步请求
一.简介: dispatch_semaphore_t:表示信号,生成信号的方法是 dispatch_semaphore_t semaphore= dispatch_semaphore_create(0 ...