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

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

另外在官方文档的下面还提到了我们这个插件的一些后端软件【指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. react路由渲染

    三种渲染方式 component = (组件对象或函数) <Route path="/home" component={Home} /> 或 <Route pat ...

  2. VMware搭建集群环境

    集群地址分配 名称 IP 子网掩码 网关 DNS flink01 192.168.22.211 255.255.255.0 192.168.22.2 114.114.114.114 flink02 1 ...

  3. 企业级私有仓库Harbor

    仓库的概念也就是用于存储,docker仓库用于存储镜像. 镜像构建完成后,很容易可以在宿主机上运行,但是如果要在其他服务器上运行,则需要考虑镜像的分发,存储的问题. 共有/私有/仓库 Docker R ...

  4. Vue学习：2.V标签综合2

    接上一篇... V标签综合使用:书架案例 功能: 实现列表的渲染和删除 思路: 使用 v-for 渲染数据列表,并在每个列表项内放置一个绑定了 del方法的"删除"按钮,点击按钮时 ...

  5. 【UnityTips】如何自定义脚本模版

    [UnityTips]如何自定义脚本模版 通常我们创建新脚本时大家看到的是这个样子: using System.Collections; using System.Collections.Generi ...

  6. UITableView的使用样例（简易向）

    功能实现 构建一个UITableView,并使其默认显示a,b,c--.. 构建一个按钮,点击后列表变为英文字母 构建一个按钮,点击后列表变为数字 基本概念 实现前头文件需要签订协议(如何签订向后看) ...

  7. VSCode因网络问题导致下载更新/扩展出错

    VSCode因网络问题导致下载更新/扩展出错 可尝试方法:   问题0: VSCode出现网络问题排查方法?       法1: 启动时加上选项 --log-net-log=netlog.json   ...

  8. k8s livenessprobe和readinessprobe详解

    一.为什么需要容器探针 如何保持Pod健康 只要将pod调度到某个节点,Kubelet就会运行pod的容器,如果该pod的容器有一个或者所有的都终止运行(容器的主进程崩溃),Kubelet将重启容器, ...

  9. C#的多线程UI窗体控件显示方案 - 开源研究系列文章

    上次编写了<LUAgent服务器端工具>这个应用,然后里面需要新启动一个线程去对文件进行上传到FTP服务器,但是新线程里无法对应用主线程UI的内容进行更改,所以就需要在线程里设置主UI线程 ...

  10. SpringBoot学习备忘

    在 mapper.xml 中的 like 的写法 db1.name like "%"#{name}"%" 参考mybatis mapper.xml中like的写 ...