前天产品提了一个编辑器的bug,本人找是找到了问题的症结,就是不好改。框架是压缩兼混淆后的代码。查一下,好多年前的框架。。。

咨询了一个同事有关旧框架的事情,他也建议我升级编辑器并帮忙帮我找了UEditor。嘻嘻。。。。

不错,开源,文档也很好用。由百度web前端研发部开发。符合中国国情,ie6也支持的不错!

官方地址:http://ueditor.baidu.com/website/index.html

1.部署方法(php版本)

a.下载项目需要的版本源码,以php为例

b.文本编辑框所放的位置


<div>
<script type="text/plain" id="myEditor" name="myContent">
//默认文字内容或修改的内容
</script>
</div>

c.加载框架脚本


<script type="text/javascript">
window.UEDITOR_HOME_URL = "ueditor/"; //一定要放在最前面
</script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"lt;</script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript">
UE.getEditor('myEditor', {
initialFrameWidth:600,//初始化宽度
initialFrameHeight:540,//初始化高度
toolbars:[["source","|","undo","redo","|","bold","italic","underline"],["paragraph","fontfamily","fontsize","|","inserttable","deletet
able","mergeright""],["searchreplace","|","insertimage","emotion"]]//自定义工具栏 三行 });
</script>
//$_POST['myContent'] 上传内容到服务器

编辑框初始化完成。

2.配置上传图片路径

a.修改imageUp.php


$config = array(
"savePath" => ($path == "1" ? "../../../../uploads/news/images/": "upload1/"),
"maxSize" => 1000, //单位KB
"allowFiles" => array(".gif", ".png", ".jpg", ".jpeg", ".bmp")
);

b.修改dialogs /image/image.html


<div class="saveDir"gt;
<var id="lang_savePath" ></var><select id="savePath">
<option value="1>uploads</option>
<!--option value="2">upload1</option-->
</select>
</div>

c.修改getRemoteImage.php


//远程抓取图片配置
$config = array(
"savePath" => '../../../../uploads/news/images/'.$userId , //保存路径
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ) , //文件允许格式
"maxSize" => 3000 //文件大小限制,单位KB
);

基本功能也就完成。一般上传不了图片,大部分都是路径配置的不对。

补充一点:

如果想非全屏下显示滚动条:ueditor.config.js里面找到autoHeightEnabled 设置为false

推荐一个很好的富文本web编辑器UEditor的更多相关文章

  1. 【ASP.NET 插件】分享一款富文本web编辑器UEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... <%@ Page Language ...

  2. Thinkphp下嵌套UEditor富文本WEB编辑器

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下,现 ...

  3. 富文本web编辑器(UEditor)

    展示效果:

  4. jquery富文本在线编辑器UEditor

    UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor的功能非常强大,官方 ...

  5. 富文本HTML编辑器UEditor

    Baidu百度开源富文本HTML编辑器UEditor JS代码网 发表于: 2013-10-30 分类:HTML编辑器  点击:2133  UEditor是由百度web前端研发部开发所见即所得富文本H ...

  6. UEditor富文本web编辑器

    UEditor是由百度web前端研发部开发所见即所得,前几天把公司原来的富文本编辑器换成百度的了,可以把秀米制作的样式 整个复制到文本编辑器中,原汁原味... 到官网看了文档,其实很简单,就简单的配置 ...

  7. UEditor富文本WEB编辑器自定义默认值设置方法

    1.在使用UEditor编辑器编写内容时你会发现,当输入的内容较多时,编辑框的边框高度也会自动增加,若希望输入内容较多时以拉框滚动的效果. 方法:找到Ueditor文件根目录下的ueditor.con ...

  8. UEditor富文本WEB编辑器设置代码高亮

    UEditor编译器支持代码高亮显示,设置方法如下: 1.页面head引入UEditor类包文件shCore.js.shCoreDefault.css代码 (注:引入文件路径根据需求变更即可) < ...

  9. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

随机推荐

  1. PHP下拉框选择的实现方法

    实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...

  2. 【bzoj】1026: [SCOI2009]windy数

    1026: [SCOI2009]windy数 Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间 ...

  3. Newtonsoft post Json 日期格式处理

     Newtonsoft.Json.Converters.IsoDateTimeConverter DateTimeConverter = new Newtonsoft.Json.Converters. ...

  4. java 资料收集

    java中线程队列BlockingQueue的用法 为什么jdk中把String类设计成final? 深入浅出单实例Singleton设计模式

  5. Word两端对齐问题

    主要是有英文的话,选择两端对齐后字符间距变大,这时候可以选择段落-----中文版式----------允许西文在单词中间换行,这个在最左上角的word选项里也有.遇到好几次这样的,主要是在参考文献里.

  6. Word添加带圈文字

    这个在项目有编号李没有,只能一个一个输入 A.开始------------字体里选择带圈的字符号 B.插入,符号里选编号

  7. [原博客] POI系列(2)

    正规.严谨.精妙. -POI bzoj 1098 : [POI2007]办公楼biu 如果把互相有手机号的建边得到一个无向图,那么这个图的补图的连通分量个数就是答案了.因为互相没手机号的必然在同一个连 ...

  8. java.lang.UnsupportedClassVersionError(java项目版本一致问题)

    报此错误,一般都是由于在myeclipse中的java项目是用高版本(jdk1.6之后)的jdk进行编译后生成的class文件,却要运行在低版本的jdk虚拟机上,导致这个错误 解决办法: 在myecl ...

  9. Android 实现ListView异步加载图片

    ListView异步加载图片是非常实用的方法,凡是是要通过网络获取图片资源一般使用这种方法比较好,用户体验好,下面就说实现方法,先贴上主方法的代码: package cn.wangmeng.test; ...

  10. linux命令中,执行一个程序,后面加上&, 代表的意思是什么?

    后台执行.也就是执行这个程序的同时,你的终端同时还能够做其他的事情,如果不加这个符号,那么你执行这个程序后,你的终端只能等这个程序执行完成才能够继续执行其他的操作 . 如:启动etcd: ./etcd ...