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. POJ 2479-Maximum sum(线性dp)

    Maximum sum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 33918   Accepted: 10504 Des ...

  2. 要点Java17 String

    字符串广泛应用在Java编程中,在Java中字符串属于对象,Java提供了String类来创建和操作字符串. 创建字符串 创建字符串最简单的方式例如以下: String greeting = &quo ...

  3. GCC、GDB、Makefile

    1.GCC程序编译 Linux系统下的gcc(GNUCCompiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作之一.gcc可以在多种硬体平台上编译出可执行程序,其执行效率与一 ...

  4. GTID复制报错处理:Last_Error: Error 'Can't drop database 'test'; database doesn't exist' on query

    创建GTID主从连接: mysql, master_user; 报错显示: Slave_IO_Running: Yes Slave_SQL_Running: No Last_Error: Error ...

  5. Oracle Enterprise linux 7 安装Oracle11gR2

    一.修改主机名和IP地址: [root@localhost Desktop]# cat /etc/hosts127.0.0.1 localhost.localdomain localhost 192. ...

  6. 实现接口IDisposable的示例

    想使用using(...), 如: using (Getter process = new Getter()) { //... } 就必须给类实现接口IDisposable public sealed ...

  7. SQL Server 强行Insert包含自增列值的记录

    SET IDENTITY_INSERT 表 ON INSERT INTO 表 ([ID] ,[SequenceNumber] ,[EnumCode] ,[Description]) VALUES ( ...

  8. VS2003,安装程序检测到另一个程序…

    昨天在安装Visual Studio .Net 2003时,出现一个对话框   "安装程序检测到另一个程序要求计算机重新启动.必须重新启动计算机后才能安装visual studio.net系 ...

  9. iOS之短信认证

    短信验证 现在很多的短信验证平台,我们比较常用的有移动开发者服务平台 根据短信验证文档来集成 1. 找到iOS短信验证的集成开发文档 2. 下载SDK和Demo目录结构  3. 运行Demo 4. 写 ...

  10. javascript 算法

    前段时间学习算法方面的知识看了一下用C语言写的一些简单的算法自己用js模拟实现一遍现在整理出来和大家分享一下. 河内塔 斐波那契数列 巴斯卡三角形 三色棋 河内之塔(Towers of Hanoi)是 ...