往在web开发的时候，尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率

UEditor官网下载地址：https://ueditor.baidu.com/website/download.html

这里我下载的是jsp版本中的UTF-8版，然后将压缩包解压之后是这个样子

解压内容中的index.html是官方给我们提供的一个富文本使用例程，打开页面可以体验到各种富文本操作。

接下来将UEditor应用到我们自己的项目中

1、新建一个动态Web工程

2、将解压到的UEditor文件拷贝到新建工程的WebContent目录下

这时会报错，不用担心。原因是我们还没有将UEditor需要用到的jar包加入到工程环境当中。

接下来打开目录jsp->lib，将lib下面的所有jar包全部拷贝到WEB-INF/lib文件中，eclipse会自动将新导入的包加入到工程环境当中。

3、新建一个ueditor.jsp页面，开始导入UEditor富文本编辑器

注意：在导入UEditor时必须要的3个文件，

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <!--ueditor的配置文件-->

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> <!--ueditor核心文件-->

<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <!--ueditor语言文件-->

导入这3个文件之后在需要调用UEditor的位置加入

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

最后通过初始化UEditor,让它显示出来

<script type="text/javascript">

        var ue = UE.getEditor('editor');

</script>

页面全部代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

<title>ueditor</title>

</head>

<body>

    <div style="width: 300px; height: 200px;">

        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

    </div>

    <script type="text/javascript">

        var ue = UE.getEditor('editor');

    </script>

</body>

</html>

效果如下：

注意：1、当文本框中的内容随<form>表单一起提交的时候，内容存储在editorValue变量中，在后台提取内容的时候可以读取此变量

2、在需要上传图片的时候，需要配置图片路径，否则上传的图片在富文本编辑器中是无法显示出来的。

   在ueditor--->jsp----->lib---->config.json文件中更改图片路径

3、在将富文本编辑器的路径加入到ueditor.config.js当中

到此配置完成！！！

百度富文本Ueditor编辑器的使用的更多相关文章

  1. jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容

    jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容 .创建编辑器 UE.getEditor('editor', { initialFrameWidth:"100%" ...

  2. 百度富文本Ueditor将图片存在项目外路径并回显

    我的毕设中需要一个类似新闻发布的功能,使用到百度富文本编辑器,不过百度富文本编辑器有点坑(只是我太菜了),粘贴图片和回显这个坑坑了我两天时间.效果是这样的: 就是可以在文本中粘贴图片并显示出来,直接说 ...

  3. 百度富文本ueditor使用小结

    最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下. 1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/ 2.h ...

  4. springboot使用百度富文本UEditor遇到的问题一览(springboot controller中request.getInputStream无法读取)

    先吐槽一下UEditor作为一个前端的js类库,非要把4种后端的代码给出来,而实际生产中用的框架不同,其代码并不具有适应性.(通常类似其它项目仅仅是给出数据交互的规范.格式,后端实现就可以自由定制) ...

  5. 富文本web编辑器（UEditor）

    展示效果:

  6. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  7. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

  8. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  9. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

随机推荐

  1. tomcat启动时非常慢，启动时 一直卡在Root WebApplicationContext: initialization completed(转)

    转载地址:https://www.cnblogs.com/youxin/p/8793554.html 使用方式: JAVA_OPTS="-Djava.awt.headless=true -D ...

  2. (转)x264的一些参数设置对编码效率的影响

    转自:http://www.cnblogs.com/wainiwann/p/5647521.html i_luma_deadzone[0]和i_luma_deadzone[1]分别对应inter和in ...

  3. Unity图集打包

    http://www.xuanyusong.com/archives/3304 http://www.xuanyusong.com/archives/3315 http://www.xuanyuson ...

  4. iOS - UITableView reloadData滚动到顶部无效问题解决

    //tableView:动态cell的高度不固定,滑动不到最顶部 //if (self.sensorDate.count > 0) { // [self.tableView scrollToRo ...

  5. RE:从零开始的莫比乌斯反演

    炫酷反演魔术根本看不懂啊...也就看看PoPoQQQ的ppt了. 这个赛季结束了,一年可以学很多很多东西呢. 因为我是写给自己看的所以写的很垃圾. 公式: 按我的理解,反演就是  x可以表示成y,然后 ...

  6. vue2中使用transition

    最终效果为  div元素从右向左出现, 然后从左向右消失. transition标签包裹要移动的元素: css 样式: 其中: 1:  为div元素显示时的状态 2:  为div元素移动的过程 (进入 ...

  7. 下载JDK开发工具包

    实例说明 开发java程序必须有Java开发环境,即jdk开发工具包,这个工具包包含了编译.运行.调试等关键的命令.运行Eclipse.NetBeans等开发工具也需要有jdk或jre的支持. 关键技 ...

  8. mui 窗口管理及窗口之间的数据传递

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. javascript的数组之filter()

    filter()方法创建一个新数组,其包含通过回调函数测试的所有元素. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruct ...

  10. oracle的高级查询

    1.简单连接 基本连接语法:SELECT [ALL|DISTINCT]column_name[,expression…]FROM table1_name[,table2_name,view_name, ...