往在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. 网络I/O模型---同步异步阻塞非阻塞之惑

    网络I/O模型 人多了,就会有问题.web刚出现的时候,光顾的人很少.近年来网络应用规模逐渐扩大,应用的架构也需要随之改变.C10k的问题,让工程师们需要思考服务的性能与应用的并发能力. 网络应用需要 ...

  2. Essay3.0发布，基于JavaScript的前后端同构博客系统

    前言 转眼间距离我开源这个项目已经两年了,最初是奔着学习的目的开发了这个项目,后来一直记录自己的学习笔记.随着时间的增长,发现之前写的代码简直不忍直视,于是就有了重构的想法.这个过程有些漫长,竟然用了 ...

  3. [学习笔记]nodejs全局安装和本地安装的区别

    参考来源于 nodejs全局安装和本地安装的区别 1.全局安装 $ npm install gulp --global 2.作为项目的开发一开(devDependencies)安装 $ npm ins ...

  4. Assembly.LoadFrom加载程序集类型转换失败解决方法

    为了让我的wcf模块框架支持自定义通道上下文,对代码又进行了一次小型的重构,测试时发现类型转换的错误,最后发现是loadfrom引起的.如果向 loadfrom 上下文中加载了一个程序集,则将激活 l ...

  5. iOS WKWebView (NSURLProtocol)拦截js、css，图片资源

    项目地址github:<a href="https://github.com/LiuShuoyu/HybirdWKWebVIew/">HybirdWKWebVIew&l ...

  6. Ubuntu系统安装nginx

    1.首先查看linux系统 cat /proc/version Linux version 4.9.59-v7+ (dc4@dc4-XPS13-9333) (gcc version 4.9.3 (cr ...

  7. react+dva+antd项目构建

    一:版本升级 首先说明一下这里的dva是最新版: 2.3.2 1.初始化项目构建 npm install dva-cli -g dva -v dva-cli version 注:通过 npm 安装 d ...

  8. JS 进阶知识点及常考面试题

    将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...

  9. 【python】——三级菜单

    作业需求: 打印三级菜单 可返回上一级 可随时退出程序 #!/usr/bin/env python # -*- coding:utf-8 -*- #Author: __Json.Zzgx__ menu ...

  10. SpringBoot--web版的ocr

    这个项目主要是为了熟悉SpringBoot搭建web项目,及打war包,部署到tomcat中 先贴页面吧 页面很low 毕竟我只是菜鸟,该app程序功能已经写完了,上传图片到服务器,后台接口解析图片中 ...