富文本编辑器是一个使用前端组件渲染的文本编辑器

功能强大，交互友好，我们写评论，写文章，一些文本编辑的地方就会使用这种编辑器插件

另外在官方文档的下面还提到了我们这个插件的一些后端软件【指Java】要求：

JDK 1.6+

Apache Tomcat 6.0+

UEditor 1.4.0+

百度的UEditor

文档说明：

http://fex.baidu.com/ueditor/#server-deploy

下载地址：

http://ueditor.baidu.com/website/download.html#ueditor

快速上手

下载好的压缩包中已经带有了演示案例

我们放到工程中翻开资源目录，就在这个位置

可以直接使用浏览器打开解析查看效果

如果要我们自己创建一个JSP的页面导入这样的一个富文本编辑器插件，需要这样：

新建一个JSP页面：

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: 2020/6/5

  Time: 14:34

  To change this template use File | Settings | File Templates.

--%>

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

<html>

  <head>

    <title>$Title$</title>

  </head>

  <body></body>

</html>

然后导入插件的脚本

    <!-- 加载编辑器的容器 -->

    <script id="container" name="content" type="text/plain">

        这里写你的初始化内容

    </script>

    <!-- 配置文件 -->

    <script type="text/javascript" src="ueditor.config.js"></script>

    <!-- 编辑器源码文件 -->

    <script type="text/javascript" src="ueditor.all.js"></script>

    <!-- 实例化编辑器 -->

    <script type="text/javascript">

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

    </script>

注意编辑器配置文件和源码文件的导入，只有这两个文件正确的导入了

才会渲染效果，功能才会正常

所以要注意导入的资源地址位置【这是JSP版本的】

<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor-utf8-jsp/ueditor.config.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor-utf8-jsp/ueditor.all.js"></script>

像这样的引入资源的脚本标签，可以直接放在头标签里面

另外的两个标签才是渲染的主体部分

表单的编写，我也看不懂前端了，只是测试了一下这个结构还算管用把

<form>

    <div class="control-group">

        <label class="control-label">内容：</label>

        <div class="controls">

                <textarea id="editor" name="context"

                          style="height: 600px;"></textarea>

            <script type="text/javascript">

                //实例化编辑器

                //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

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

                //弹出图片上传的对话框

                function upImage() {

                    var myImage = ue.getDialog("insertimage");

                    myImage.open();

                }

            </script>

        </div>

        <input type="submit" value="提交">

    </div>

</form>

【UEditor】富文本编辑器 简单上手的更多相关文章

  1. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

  2. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  3. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  4. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  5. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  6. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  7. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

  8. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

  9. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  10. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

随机推荐

  1. idea 使用 mvn clean package 报错 Could not create local repository at

    使用 mac 版本的 idea 打包使用打包命令 mvn clean package 总是报错: [ERROR] Could not create local repository at /Repos ...

  2. INFINI Labs 产品更新 | Console 告警中心 UI 全新改版，新增 Dashboard 全屏模式等功能

    本次 INFINI Labs 产品更新主要发布 Console v1.7.0,重点优化了 Console 告警中心和数据看板 Dashboard 可视化功能.详细介绍如下: 优化告警中心 UI 上个版 ...

  3. EF 字段 4位小数 四位小数

    默认情况下只能保存2位小数.如果有字段需要4位小数则: 在OnModelCreating方法中添加一行: modelBuilder.Entity<SissMerchantBillRate> ...

  4. mysql删除主键索引，删除索引语法

    mysql删除主键索引,删除索引语法 ### Incorrect table definition; there can be only one auto column and it must be ...

  5. aspose word与pdf互转

    aspose word与pdf互转 package com.example.core.mydemo.aspose; import com.aspose.words.Document; import c ...

  6. Cython编译报错“numpy/arrayobject.h: No such file or directory”解决方案

    问题背景 Cython是用来加速Python程序性能的一个工具,其基本使用逻辑就是将类Python代码(*.pyx扩展格式)编译成\(*.c,*.so\)动态链接库文件,然后就可以在正常的Python ...

  7. hbase第一课：hbase-2.2.7分布式搭建

    hbase-2.2.7分布式搭建文档 1.上传解压配置环境变量 # 1.解压 tar -xvf hbase-2.2.7-bin.tar.gz.gz # 2.配置环境变量 vim /etc/profil ...

  8. Windows 7操作系统全面解析与实用技巧

    Win7操作系统 一.操作系统的概述 1.1操作系统的概念 操作系统(operating system,简称OS)一组控制和管理计算机系统的硬件和软件资源.控制程序执行.改善人机界面.合理地组织计算机 ...

  9. get基于报错的sql注入

    get基于报错的sql注入发现 Less1: sqli-labs第一关提示说在网页上输入id,也就是?id=1. 但这个?是什么意思,它表示index.php?也就是默认页面.然后?id=1就是把id ...

  10. HTTP常见的状态码？

    100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求 ...