往在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. python 文档

    python 文档 https://docs.python.org/2/library/index.html

  2. Golang遇到的一些问题总结

    当类成员是struct指针.map.slice 时,默认初始化的值是 nil,在使用前需要提前初始化,否则会报相关的 nil 错误.引用类型的成员,默认会初始化为 nil,但对 nil 的切片进行 l ...

  3. linux telnet检测与某个端口是否开通

    转自:http://blog.51cto.com/meiling/1982402 一:telnet此法常被用来检测是个远端端口是否通畅. 测试域名: # telnet baidu.com 80 Try ...

  4. [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc

    今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> b ...

  5. Sqlalchemy model 文件自动生成

    自动生成Sqlalchemy的models文件的包早用过了,有个字段类型做了改动,调了得10几分钟才搞定.记录下自动生成models文件的python包sqlacodegen sqlacodegen已 ...

  6. Oracle 11gR2(11.2.0.4)安装包（7个）作用说明

    在之前使用Oracle10G的时候,官网下载的数据库安装包只有两个文件,解压合并后为完整的安装包. 后来因为检查出多个Oracle漏洞,需要现场Oracle数据库版本需要升级到11.2.0.4,下载的 ...

  7. Zephyr学习（一）Zephyr介绍

    Zephyr是一个面向物联网的嵌入式实时操作系统(RTOS),是Linux基金会旗下的一个项目,具有以下特点: 1.安全的,灵活.高可扩展性,支持多种硬件平台(ARM.ARC.X86.xtensa.n ...

  8. axios+post方法提交formdata步骤详解

    遇到的问题 :怎么看自己发送的格式和后台发送的格式 参考 http://www.php.cn/js-tutorial-396014.html https://blog.csdn.net/qq73705 ...

  9. 网络流24T

    说出来你们可能不信,我咕了三个多星期了,今晚忽然不想再写题了,(写自闭了,把这边整理一下 1. 洛谷P2756 飞行员配对问题 二分图匹配: #include <bits/stdc++.h> ...

  10. HTTP状态码--含义

    以下是HTTP状态码(HTTP Status Code)及其解释 1xx(临时响应) (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. (切换协议) 请 ...