使用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 整合百度富文本 ...
随机推荐
- RMQ_ST算法
RMQ (Range Minimum/Maximum Query)算法 1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数 ...
- 【整理】--VC 编译整理
.h用于编译阶段的审核,如在math.h中有函数声明:int abs(int);但是在使用中写为#include <math.h>...abs(3,5);编译器阶段就会检测出错误. .dl ...
- node-restify简介
restify 是Node.js的模块.虽然restify的API或多或少的参考了express,但restify不是一个MVC框架,它是一套为了能够正确构建REST风格API而诞生的框架. ###安 ...
- NoSQL精粹(NoSQL Distilled)——序言
之前说到博客长草的问题,想了想除了很忙特别忙非常忙各种瞎忙忙你妹啊外,主要还是不知道写什么好--到这家公司的两年中从JS到领域驱动到缓存服务器从前端到后端各种折腾,有些东西虽然有所心得,不过既然前人已 ...
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- [游戏模版17] Win32 推箱子 迷宫
>_<:Here introduce a simple game: >_<:resource >_<:only can push a box and finally ...
- servlet servlet请求与响应
request 客户端浏览器发出的请求被封装成一个HttpServletRequest对象.所有的信息包括请求的地址,请求的参数,提交的数据,上传的文件,客户端的Ip地址甚至客户端操作系统都包含在Ht ...
- 仿Material UI框架的动画特效
Material UI是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因 ...
- Web调试工具——Fiddler介绍
Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...
- paip.mysql 全文索引查询空白解决
paip.mysql 全文索引查询空白解决 或者 Incorrect key file for table: \'%s\'. Try to repair it 作者Attilax 艾龙, ...