UEditor是百度的编辑器,界面美观,功能强大,用起来还不错。

详见该链接http://ueditor.baidu.com/

一、下载

http://ueditor.baidu.com/download.html

二、部署

眼下最新版本号为1.1.7.3

下载下来的文件名称为ueditor1.1.7.3.zip

把解压出来的ueditor目录整个拷贝到项目WebRoot下

1.页面<head>里添加下面代码

<script type="text/javascript" charset="utf-8" src="ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" type="text/css" href="ueditor/themes/default/ueditor.css"/>

2.页面<body>里添加下面代码

<div id="newscontent"></div>
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render('newscontent');
</script>

打开浏览器,输入对应地址,一个美丽的编辑器就出现了,但表情和上传文件这块还须要更改一下配置

三、改动配置,添加上传

打开editor_config.js文件,改动URL的值

var URL= "ueditor/";

保存,刷新一下页面,表情是不是能够出来了?

文件上传默认用的是ueditor/server/upload/php/up.php进行上传的,假设用jsp上传,须要改动两个地方

1.改动ueditor/dialogs/image/image.html页面里第304行和ueditor/dialogs/wordimage/wordimage.html页面第82行,改为使用up.jsp进行上传,这里面用的是apache的fileupload组件,所以要导入apache commons组件中的fileupload和io这两个jar包

url:'../../server/upload/jsp/up.jsp',

2.改动ueditor/server/jsp/up.jsp,指定文件的保存路径

//保存文件路径
String filePath = "uploadfiles";
String realPath = "D:\\apache-tomcat-6.0.26\\webapps\\test\\"+filePath;

这样一切就OK了,刷新页面測试一下!

UEditor用法的更多相关文章

  1. ThinkPHP第十三天(CONF_PATH、APP_PATH,UEditor用法)

    1.CONF_PATH 项目配置文件目录地址,APP_PATH 项目地址 2.ThinkPHP中更新数据的连接操作位save(),更新一个字段可以用setField(name,value)方法. 3. ...

  2. 百度UEditor(富文本编辑器)的基础用法

    百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的. 我用是的SSH来写的项目. 1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到W ...

  3. ueditor的简单用法

    先粘贴未使用ueditor之前的代码: <body> <label for="input_content">作答区:</label> <t ...

  4. Django xadmin后台添加富文本编辑器UEditor的用法

    效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...

  5. ueditor的用法

    今天做了一下百度富文本编辑器,遇到了一些问题,现在来总结一下: (1)jQuery没有引用,解决方法:引用jQuery并且放在所有的js前面 (2)没有报错,但是样式显示不出来.解决方法:css引用的 ...

  6. Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...

  7. ueditor的配置和使用

    ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下.先看一下效果,如下: 1.文件的上传 首先在uedi ...

  8. AngularJs定制样式插入到ueditor中的问题总结

    总结一下自己给编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题不少,终于在**的帮助下,完成了,还剩下老版本和新版本的交互没有弄好,不过不难.下面分别 ...

  9. UEditor文档

    UEditor文档http://fex.baidu.com/ueditor/Ueditor 前后端数据交互 http://blog.csdn.net/bobo_93/article/details/5 ...

随机推荐

  1. poj1833 排列

                                                                                                         ...

  2. 在php添加mongo过程中出现的mongo.so: > undefined symbol: php_json_encode in Unknown on line 0. After installation mongo driver for php 的错误

    3 down vote my system is centos 6.3. I got the problem solved. vim /etc/php.ini then add extension=j ...

  3. Timer和TimerTask

    目录结构: Timer和TimerTask 一个Timer调度的例子 如何终止Timer线程 关于cancle方式终止线程 反复执行一个任务 schedule VS. scheduleAtFixedR ...

  4. JAVA常见异常集锦(持续更新)

    No1:Nested in org.springframework.beans.factory.parsing.BeanDefinitionParsingException 2013-07-02 10 ...

  5. [Android4.4.3] Nubia Z5S Mokee4.4.3 RC2.0 by syhost

    这个ROM先前在Mokee官网公布过,但一些人測试bug不少,因此已经撤下, 但又有人反馈跟之前RC1.0版的bug差点儿相同, 所以再次在网盘单独公布, 截图以及注意事项见之前的RC1.0的帖子, ...

  6. 2台linux机器免密码互相登陆

    一,如何使2台机器不需要密码互相登陆到对方呢? 这个和使用密钥的登陆Linux系统非常相似,也是将自己的公钥传到要登录的服务器上去修改权限即可. 1,A机器: 执行ssh-keygen命令,一路回车. ...

  7. Visual Studio常用的快捷键

      每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分 ...

  8. C#中打日志导出日志到txt文本

    /// <summary> /// 打日志 /// </summary> /// <param name="log"></param> ...

  9. CSS3实现图片鼠标悬浮放大效果

    .excerpt .focus a img{ -webkit-transition: all ease .3s; transition: all ease .3s }.excerpt .focus a ...

  10. PHP.INI常用设置一览表(持续更新)

    在编程的过程中遇到或发现的问题,会持续的更新: 1. 打破var_dump的显示瓶颈 php开发环境里,安装了xdebug模块后,var_dump()输出的结果将比较易于查看,但默认情况下,var_d ...