往在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. eclipse的debug模式下启动不了tomcat

    使用eclipse启动tomcat,正常模式下可以启动tomcat,却在debug模式下无法启动tomcat. 这个问题可能是由于eclipse和tomcat的交互而产生的,在以debug模式启动to ...

  2. C#项目”XXXXX”针对的是”.NETFramework,Version=v4.7.1”但此计算机没有安装它

    遇到这样一个问题:C#项目”XXXXX”针对的是”.NETFramework,Version=v4.7.1”但此计算机没有安装它 就是我在打开别人的项目,发现别人的项目.Net Framework的版 ...

  3. 【Dubbo 源码解析】08_Dubbo与Spring结合

    Dubbo 与 Spring 结合 基于 dubbo.jar 内的 META-INF/spring.handlers 配置,Spring 在遇到 dubbo 名称空间时,会回调 DubboNamesp ...

  4. [原]Jenkins(二十一) jenkins再出发Build periodically和Poll SCM

    缘由: 使用jenkins的目的需要固定时间构建和间隔固定时间构建,所以才会用到这两个功能. 位置:这两个功能的位置位于每个job的config项中,如下图: [重要的注意点:]           ...

  5. lis最长上升子序列

    因为是最长上升的,可以用一个数组储存上升的序列,如果后一个数字比数组的最大数字还大,就加到末尾去,如果不大于,那么就可以把这个数组中比他大的数字替换掉,因为如果数字更小,后面上升序列更长的可能性更大, ...

  6. css小知识 2

    效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...

  7. C# 日期时间

    --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日时分秒      currentTime=System. ...

  8. 洛谷P3808 【模板】AC自动机（简单版）

    题目背景 这是一道简单的AC自动机模板题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 管理员提示:本题数据内有重复的单词,且重复单词应该计算多次, ...

  9. ECMAScript基础

    概念: 1):区分大小写 2):变量是弱类型的. 3):每行结尾的分号可有可无 4):注释与Java,C和PHP语言的注释相同 5):括号表明代码块 原始值:是存储在栈中的简单数据段,也就是说他们的值 ...

  10. CFGym101138D Strange Queries 莫队/分块

    正解:莫队/分块 解题报告: 传送门 ummm这题耗了我一天差不多然后我到现在还没做完:D 而同机房的大佬用了一个小时没有就切了?大概这就是大佬和弱鸡的差距趴QAQ 然后只是大概写下思想好了因为代码我 ...