百度富文本ueditor使用小结
最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下。
1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/
2.html页面调用并引入js插件
<div>
<!-- 富文本 -->
<textarea name="content" id="myEditor" style="height:300px;"></textarea>
</div>
<!--script引入富文本-->
<!-- 配置文件,须首先引入 -->
<script src="__PUBLIC__/Home/ueditor/1.4.3/ueditor.config.js" type="text/javascript"></script>
<!-- 编辑器源码文件 -->
<script src="__PUBLIC__/Home/ueditor/1.4.3/ueditor.all.js" type="text/javascript"></script>
<!-- 实例化编辑器,并设置要显示的标签等,这里我需要的toolbar标签就这些,自己可参考文档自定义设置 -->
<script type="text/javascript">
UE.getEditor('myEditor',{
toolbars: [
['undo', 'redo', 'insertimage']
],
autoHeightEnabled: true, //是否自动长高,默认true
autoFloatEnabled: true, //是否保持toolbar的位置不动,默认true
elementPathEnabled: false //是否启用元素路径,默认是显示
});
</script>
ok,如下图:
PS-小结::::::
1.修改不显示‘本地已保存’的提示(1.4.3版本中)
2.去掉元素路径、字数统计等
3.因为我将上传的信息进行处理,规避了一些特殊字符,所以存到数据库时,出现了被转义问题,并且页面显示出错
4.上传的图片太大没有自动缩放问题:可在富文本插件的根目录下找到themes->iframe.css文件,并在其中敲入以下代码,注意缓存
img {
max-width: 65%; /*图片自适应宽度*/
max-height: 65%; /*图片自适应高度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {
border: 0 none;
height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/
前:::
后:::
5.上传图片提交后太后在页面显示的同样太大,可在html页面通过定位到对应的img,敲入style,如:img{max-width:100%;}
6.开发环境上传图片等可正常使用,但在运行环境却不行,报错如:后台配置项返回格式出错,上传功能将不能正常使用!
原因/解决:php目录下的controller文件中的date_default_timezone_set函数大小写问题/改为date_default_timezone_set("Asia/Chongqing");即可
7.注意、注意、注意:引入富文本插件时,文件顺序一定不能错,否则无法引入!!!!!config文件在最前
以上就是目前遇到的问题,不足之处,多多指教,共同进步
百度富文本ueditor使用小结的更多相关文章
- 百度富文本Ueditor将图片存在项目外路径并回显
我的毕设中需要一个类似新闻发布的功能,使用到百度富文本编辑器,不过百度富文本编辑器有点坑(只是我太菜了),粘贴图片和回显这个坑坑了我两天时间.效果是这样的: 就是可以在文本中粘贴图片并显示出来,直接说 ...
- 百度富文本Ueditor编辑器的使用
往在web开发的时候,尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率 UEditor官网下载地址:https:// ...
- springboot使用百度富文本UEditor遇到的问题一览(springboot controller中request.getInputStream无法读取)
先吐槽一下UEditor作为一个前端的js类库,非要把4种后端的代码给出来,而实际生产中用的框架不同,其代码并不具有适应性.(通常类似其它项目仅仅是给出数据交互的规范.格式,后端实现就可以自由定制) ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
随机推荐
- 洛谷 P1441 砝码称重
题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 输入输出格式 输入格式: 输入文件weight.in的第1行为有两个整数n ...
- Django框架中的Context使用
Django框架中的Context使用 2017年11月09日 20:01:09 aweilark 阅读数:1113 转载自:http://www.aichengxu.com/python/606 ...
- HTML5-MathML-基础篇
MathML是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准.用来在互联网上书写数学符号和公式的置标语言. 注意:大部分浏览器都支持MathML标签,如果你的浏览器不支持该标签,可以使 ...
- Ubuntu基于zsh自定义设置shell主题
为优化Ubuntu命令行页面效果,Google一番选择github上开源项目zsh,以自定义Shell主题,注:本机系统为Ubuntu 14.04 1.安装zsh sudo apt-get insta ...
- TP5.x——打印SQL语句
操作 使用fetchSql,然后sql就会只输出sql语句而不执行 var_dump(Db::name('user')->where(array('id'=>$this->_uid, ...
- Redis——redis使用redis-dump,redis-load导出导入数据——【三】
来源 https://www.cnblogs.com/dadonggg/p/8662455.html https://blog.csdn.net/chenxinchongcn/article/deta ...
- A - 敌兵布阵 HDU - 1166 线段树(多点修改当单点修改)
线段树板子题练手用 #include<cstdio> using namespace std; ; int a[maxn],n; struct Node{ int l,r; long lo ...
- [APIO2012]守卫
近日状态并不是很好, 很不稳, 思路也不是很清晰 希望自己能走出来 题意:有序列1~n 现给出两种区间 区间0:序号在[x, y]的节点不能有忍者 区间1:序号在[x, y]的节点区间里至少有一个忍者 ...
- [luogu3810][bzoj3262]陌下花开【cdq分治】
题目描述 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),用三个整数表示.现在要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当且仅Sa&g ...
- Nifi flow 备份恢复
1. 备份 copy 下面的文件到本地: conf/flow.xml.gz 2. 恢复 新安装一个nifi的环境,把这个文件copy到conf文件夹下 运行nifi, 在界面上create ...