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小结的更多相关文章

  1. 百度富文本ueditor使用小结

    最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下. 1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/ 2.h ...

  2. ueditor使用小结

    一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/webs ...

  3. ueditor使用小结【来源网络】

    原文地址:http://www.cnblogs.com/janes/p/5072496.html ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website ...

  4. Node + Express + Mysql的CMS小结

    因为之前用过上述的组合完成过很多系统,而这一次是为了实现一个帮助系统的静态网页发布.因为很久不写,重点说遇到的几个坑: 1.库版本的问题 比如mysql连接数据库一直报错,因为系统重装过,所以重新安装 ...

  5. ueditor编辑器使用总结

    ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.ba ...

  6. Ueditor设置默认字体、字号、行间距,添加字体种类(转)

    Ueditor默认字体.字号.行间距的修改: ueditor默认字号是16号,默认字体为sans-serif,默认行间距为5px,如下图所示: 首先,修改ueditor.all.js文件中如上图红框中 ...

  7. Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式

    最近,硬是和百度的UEditor组件杠上了.自己的个人官网项目,很容易就搞定了,公司的项目,尼玛,各种问题.项目多了,环境复杂了,解决问题的方法也得不断调整. 项目用Maven管理jar包,用到了UE ...

  8. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  9. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

随机推荐

  1. C#开发中使用Npoi操作excel实例代码

    C#开发中使用Npoi操作excel实例代码 出处:西西整理 作者:西西 日期:2012/11/16 9:35:50 [大 中 小] 评论: 0 | 我要发表看法 Npoi 是什么? 1.整个Exce ...

  2. Ubuntu安装sougou输入法

    1. 按照[1]的步骤进行,完美实现就好. 2. 必须重启后才能实现功能. Reference: [1] http://pinyin.sogou.com/linux/

  3. python numpy 介绍

    NumPy提供了两种基本的对象:ndarray(N-dimensional array object)和 ufunc(universal function object).ndarray(下文统一称之 ...

  4. JAVA学习博客----2015.4

    这是开始写的第一篇学习博客,记录一下每个月的学习进度和掌握程度,因为这是第一次写学习博客而且已经看编程方面的书已经有几个月了,所以这一篇学习博客可能看似有些乱或者篇幅太长.从十二月的<程序员教程 ...

  5. C#,Java,C -循环冗余检验:CRC-16-CCITT查表法

    C#代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...

  6. [ucgui] 彩色条函数

    /* 颜色条 */ void ShowColorBar(void) { , y0 = , yStep = , i; int NumColors = LCD_GetDevCap(LCD_DEVCAP_N ...

  7. Nutz Dao实体中索引注解的使用(@TableIndexes@Index)

    Nutz是一组轻便小型的框架的集合, 各个部分可以被独立使用,把SSH的精华封装在一个1M左右的jar包中,Nutz不对其他任何第三方库产生依赖,如果不考虑数据库链接和日志的话,创建完美的Web应用只 ...

  8. Gatling->次时代性能测试利器

    Gatling作为一款开源免费的性能测试工具越来越受到广大程序员的欢迎.免费当然是好的,最缺钱的就是程序员了;开源更好啊,缺啥功能.想做定制化的可以自己动手,丰衣足食.其实我最喜欢的原因是其提供了简洁 ...

  9. LeadTools Android 入门教学——运行第一个Android Demo

    LeadTools 有很多Windows平台下的Demo,非常全面,但是目前开发手机应用的趋势也越来越明显,LeadTools也给大家提供了10个Android的Demo,这篇文章将会教你如何运行第一 ...

  10. SQL中order by;group up;like;关联查询join on的用法

    排序order by的用法: 1.order by 字段名1 asc/desc, 字段名2 asc/desc,... 先按照字段名1的升序/降续给表进行排列 然后 按照字段名2的升序/降续给表进行排列 ...