往在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. (原)关于udp的socket发送数据耗时的问题探讨

    转载请注明出处:http://www.cnblogs.com/lihaiping/p/6811791.html 本学习笔记,仅用于问题探讨,如有不同,可以讨论. 最近在看流媒体分发服务器的相关代码,其 ...

  2. 如何让linux的history命令显示时间记录

    在.bashrc文件追加如下内容即可: HISTFILESIZE= HISTSIZE= HISTTIMEFORMAT='%F %T ' export HISTTIMEFORMAT

  3. Java & PHP & Javascript 通用 RSA 加密 解密 (长字符串)

    系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...

  4. vscode切换界面布局

    调整vscode的控制面板位置 鼠标操作 view>Appearance>Toggle Panel Position   调整控制面板在界面底部 或者界面右侧 2.编辑区分布 鼠标操作 v ...

  5. Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径

    Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...

  6. 关于Kafka java consumer管理TCP连接的讨论

    本篇是<关于Kafka producer管理TCP连接的讨论>的续篇,主要讨论Kafka java consumer是如何管理TCP连接.实际上,这两篇大部分的内容是相同的,即consum ...

  7. HOOK IDT频繁蓝屏(Window 正确 HOOK IDT)

    环境 win7x64 Microsoft Windows [版本 6.1.7601]也是一个朋友 HOOK IDT 测试 问我IDT为啥老是蓝屏.结果是因为swapgs问题. 如果你知道swapgs作 ...

  8. Qt编写自定义控件3-速度仪表盘

    前言 速度仪表盘,写作之初的本意是用来展示当前测试的网速用的,三色圆环+数码管显示当前速度,Qt自带了数码管控件QLCDNumber,直接集成即可,同时还带有动画功能,其实也可以用在汽车+工业领域等, ...

  9. js call 理解

    首先直接放定义: 总结 1.前提:fun是函数 2.thisArg是在fun函数运行时 指定的this值 1.使用call来继承,新函数使用已经定义好的函数里的方法 下面直接上实例  函数b直接使用函 ...

  10. juqery 点击分页显示，指定一页显示多少个，首次加载显示多少个

    源代码html: //源代码:html <div class="jq22"> <div class="hidden"> <li&g ...