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

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

另外在官方文档的下面还提到了我们这个插件的一些后端软件【指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. webpack 路径别名与导入后缀省略

    // 解析模块的规则 resolve: { // 配置解析模块路径别名:优点简写路径,缺点路径没有提示 alias: { // 定义一个@变量,可在import引入时使用 '@': path.reso ...

  2. v-for 伪标签：template：

    根据一组数组或对象的选项列表进行渲染. v-for指令需要使用 (item,index) in 数组或对象 形式的特殊语法,同时还需要指定key值,key的作用在vue进行新旧数据比对渲染页面里,如果 ...

  3. LeetCode 72. Edit Distance 编辑距离 (C++/Java)

    题目: Given two words word1 and word2, find the minimum number of operations required to convert word1 ...

  4. Windows下cmd命令行sftp上传至Linux服务器

    1.Windows+R进入运行 2.输入cmd,进入命令行 3.命令建立连接 sftp 用户名@ip地址 例如: 输入密码,即可建立连接 上传方式: 1)直接拖动文件到命令行窗口,可以直接显示该文件的 ...

  5. MYSQL 连接数据库过程中发生错误，检查服务器是否正常连接字符串是否正确，错误信息：未将对象引用设置到对象的实例。

    一: 中文提示 : 连接数据库过程中发生错误,检查服务器是否正常连接字符串是否正确,错误信息:未将对象引用设置到对象的实例.DbType="MySql";ConfigId=&quo ...

  6. Grafana 开源了一款 eBPF 采集器 Beyla

    eBPF 的发展如火如荼,在可观测性领域大放异彩,Grafana 近期也发布了一款 eBPF 采集器,可以采集服务的 RED 指标,本文做一个尝鲜介绍,让读者有个大概了解. eBPF 基础介绍可以参考 ...

  7. Mysql主机环境导入导出数据

    mysql数据库,在主机环境下导出数据为csv文件. 命令:select * into outfile '/mysql/11.csv' from 表; 可能会报错:ERROR 1290 (HY000) ...

  8. Spring源码——AOP实现原理

    引言 Spring AOP(Aspect Orient Programming),AOP翻译过来就是面向切面编程,它体现的是一种编程思想,是对面向对象编程(OOP)的一种补充. 在实际业务开发过程中, ...

  9. Docker中部署单机Redis详细教程

    1.拉取Redis镜像 # 拉取redis镜像,不指定版本则默认是最新版本 docker pull redis 2.查看镜像 # 列出本地镜像 docker images 3.准备配置文件路径 # 创 ...

  10. 记录EF 排序配上自定义的比较器

    记录EF 排序配上自定义的比较器 前言 要求页面文件显示的时候能够按照序号去排序要求如下: 数据库有一个列存放文件名,如: 1.1文件 1.2文件 1.1.1文件 1.1.11文件1.0.txt 1. ...