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

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

另外在官方文档的下面还提到了我们这个插件的一些后端软件【指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. Java synchronized与ReentrantLock的区别

    synchronized与ReentrantLock的区别 synchronized是一个关键字,ReentrantLock是一个类 synchronized修饰代码块和方法,ReentrantLoc ...

  2. vue3 Suspense

    在Vue.js 3中,Suspense 是一个用于处理异步组件的特殊组件,它允许你在等待异步组件加载时展示备用内容.这对于优化用户体验.处理懒加载组件或异步数据获取时非常有用.Suspense 的主要 ...

  3. 使用Git命令从本地上传到码云

    Gitee创建仓库内没有内容 本地: 初始化Git仓库:git init 提交文件到暂存区:git add . //. 表示提交所有文件 提交文件到工作区:git commit -m "此次 ...

  4. 什么是JDBC的最佳实践？

    a.数据库资源是非常昂贵的,用完了应该尽快关闭它.Connection,   Statement,    ResultSet等JDBC对象都有close方法,调用它就好了. b.养成在代码中显式关闭掉 ...

  5. ObjectMapper Json字符串的转换处理

    package com.example.demo; import com.example.pojo.User; import com.fasterxml.jackson.annotation.Json ...

  6. 字符串— trim()、trimStart() 和 trimEnd()

    在今天的教程中,我们将一起来学习JavaScript 字符串trim().trimStart() 和 trimEnd(). 01.trim() 学习如何使用 JavaScript  trim()方法从 ...

  7. Linux特殊权限之SUID，SGID

    SUID定义 暂时借用属主身份运行二进制程序.(SGID则是借用属组) 应用场景 某些用户在运行二进制程序的过程中,没有权限访问此二进制程序中其他的一些文件.给此用户过高的权限又不安全. 比如,每个用 ...

  8. 十大java应用服务器(web server)总结

    java应用服务器(web server),是指运行java程序的web应用服务器软件,不包括nginx.Apache等通用web服务器软件. 一.Tomcat Tomcat是Apache 软件基金会 ...

  9. Hugging Face Accelerate 两个后端的故事：FSDP 与 DeepSpeed

    社区中有两个流行的 零冗余优化器(Zero Redundancy Optimizer,ZeRO) 算法实现,一个来自 DeepSpeed,另一个来自 PyTorch.Hugging Face Acce ...

  10. 汇总："undefined reference to" 问题解决方法

    背景 在Linux下编程容易出现的现象,就是在链接多文件的时候总是报错,类似下面这样的错误: (.text+0x13): undefined reference to `func' 关于undefin ...