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

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

另外在官方文档的下面还提到了我们这个插件的一些后端软件【指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. 赛博斗地主——使用大语言模型扮演Agent智能体玩牌类游戏。

    通过大模型来实现多个智能体进行游戏对局这个想对已经比较成熟了无论是去年惊艳的斯坦福小镇还是比如metaGPT或者类似的框架都是使用智能体技术让大模型来操控,从而让大模型跳出自身"预测下一个t ...

  2. kettle从入门到精通 第六十六课 ETL之kettle kettle阻塞教程，轻松获取最后一行数据，so easy

    场景:ETL沟通交流群内有小伙伴反馈,如何在同步一批数据完成之后记录下同步结果呢?或者是调用后续步骤.存储过程.三方接口等. 解决:使用步骤Blocking step进行阻塞处理即可. 1.下面的de ...

  3. ETL工具-nifi干货系列 第十二讲 nifi处理器UpdateRecord使用教程

    1.上一节课我们讲解了nifi处理器UpdateAttribute,专门用来更新flowFile的属性字段.本节课我们一起来学习UpdateRecord,该处理器用来更新flowFile的流文件内容数 ...

  4. 使用WinSW把nginx做成windows服务

    1.下载nginx:http://nginx.org/en/download.html 2.下载win sw:https://github.com/winsw/winsw/releases/tag/v ...

  5. java怎样把两个list里边相同的数据取出

    1 import java.util.ArrayList; 2 import java.util.List; 3 4 public class I { 5 6 public static void m ...

  6. restful接口返回JSONObject和父类抽象实现类设计,请求头获取sign和支付宝RSA签名验签工具类方法

    restful接口返回JSONObject和父类抽象实现类设计,请求头获取sign和支付宝RSA签名验签工具类方法 1.JSONObject可以通用数据的灵活性,类似Map数据,数据字段不清晰.具体返 ...

  7. Mysql行转列，列转行 WITH ROLLUP 统计

    Mysql行转列,列转行 WITH ROLLUP 统计 DROP TABLE IF EXISTS tb_score; CREATE TABLE tb_score( id INT(11) NOT NUL ...

  8. 将静态文件打包进nuget里 Net Core

    我之前写了一个.net core 生成验证码的小工具 需要使用者先单独下载字体文件到本地在 install-package 感觉这样很捞也很不方便,但当时忙着做其他需求现在更新下. 其实很简单 vis ...

  9. java基础-匿名类/对象

    最近有同事问我,以下这个语句是什么意思? MqMessge<MqMessgeThink> mm= JSON.parseObject(message.toString(),new TypeR ...

  10. 同时开启firewall和iptables

    使用向导 With the iptables service, every single change means flushing all the old rules and reading all ...