百度UEditor富文本插件的使用

这个富文本还是功能挺全的.

UEditor下载后直接运行即可访问,但在上传文件时需要单独再做配置.

可选的依赖文件,本案例不采用:

       <dependency>

            <groupId>net.mingsoft</groupId>

            <artifactId>ms-ueditor</artifactId>

            <version>1.0.2</version>

        </dependency>

官方的demo就不多说了.

下面是我设置的富文本,其中可以进行富文本大小的拉缩.当提交数据时,使用 UE.getEditor('container').getContent() 即可获取富文本内容.

如果是发表新闻的话,可以把标题,作者等input内容放入form中,使用jquery.serializejson.js获取json数据,并加上content富文本内容传递给后端.

前端demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>ueditor demo</title>

    <!--配置文件-->

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

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

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

    <script src="/ueditor/ueditor.parse.min.js"></script>

    <script src="/js/jquery-3.1.0.min.js"></script>

    <script src="/js/jquery.serializejson.js"></script>

</head>

<body>

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

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

<button id="formBtn">提交</button>

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

<script type="text/javascript">

    var ue = UE.getEditor('container',{

        //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义

        autoHeightEnabled: true, //设置自动长高

        scaleEnabled: true, //是否可以拉伸长高，默认true(当开启时，自动长高失效)

        autoFloatEnabled: false,  //自动浮动,false能适应全部宽度,是否保持toolbar的位置不动，默认true

        initialContent: '请在这里输入要编辑的内容', //富文本提示内容

        autoClearinitialContent: true, //聚焦富文本后清空提示内容

        enableAutoSave: true, //启用自动保存

        imageScaleEnabled: true, //启动图片拉伸缩放

        pasteplain: true, //启用纯文本粘贴

        allHtmlEnabled: false, //提交到后台的数据是否包含整个html字符串

        autoTransWordToList: true, // [默认值：false] //禁止word中粘贴进来的列表自动变成列表标签

        enableContextMenu: true, //右键功能菜单

        maximumWords: 10001, //允许的最大字符数

        tabSize: 4, //点击tab键时移动的距离，tabSize倍数，tabNode什么字符做为单位

        tabNode: '&nbsp;', //tab使用的单位,空格

        tableDragable: true, //表格是否可以拖拽

        sourceEditor: "codemirror",  //源码的查看方式，codemirror是代码高亮，textarea是文本框，默认是codemirror，注意默认codemirror只能在ie8+和非ie中使用

    });

</script>

<script>

    $("#formBtn").click(editorSubmit);

    function editorSubmit(){

        // alert("content:"+(UE.getEditor('editor').getContent()));

        $.ajax({

            url:"/editorData",

            type:"POST",

            // data:$("#editor").serializeJSON(),

            data:{"content":UE.getEditor('container').getContent()},

            dataType:"json",

            success:function(data){

                alert(data);

            }

        });

    }

</script>

</body>

</html>

对应上面前端的接口

package com.tansuo365.test1.controller.ueditor;

import com.tansuo365.test1.ueditor.ActionEnter;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@RequestMapping("")

@Controller

public class UEditorController {

    @RequestMapping("/ueditor")

    private String ueditor() {

        return "/news/index";

    }

    @RequestMapping("/ueditorDemo")

    private String ueditorDemo() {

        return "/news/demo";

    }

    @RequestMapping(value = "/config")

    public void config(HttpServletRequest request, HttpServletResponse response) {

        response.setContentType("application/json");

        String rootPath = request.getSession().getServletContext().getRealPath("/");

        try {

            String exec = new ActionEnter(request, rootPath).exec();

            PrintWriter writer = response.getWriter();

            writer.write(exec);

            writer.flush();

            writer.close();

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

    //TODO

    @ResponseBody

    @RequestMapping("editorData")

    public Integer testEditor(@RequestParam("content") String content) {

        System.out.println("content:" + content);

        return 1;

    }

}

官方demo: index.html

<!DOCTYPE>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <title>完整demo</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <script type="text/javascript" charset="utf-8" th:src="@{ueditor.config.js}"></script>

    <script type="text/javascript" charset="utf-8" th:src="@{ueditor.all.js}"> </script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script type="text/javascript" charset="utf-8" th:src="@{lang/zh-cn/zh-cn.js}"></script>

    <style type="text/css">

        div{

            width:100%;

        }

    </style>

</head>

<body>

<div>

    <h1>完整demo</h1>

    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

</div>

<div id="btns">

    <div>

        <button onclick="getAllHtml()">获得整个html的内容</button>

        <button onclick="getContent()">获得内容</button>

        <button onclick="setContent()">写入内容</button>

        <button onclick="setContent(true)">追加内容</button>

        <button onclick="getContentTxt()">获得纯文本</button>

        <button onclick="getPlainTxt()">获得带格式的纯文本</button>

        <button onclick="hasContent()">判断是否有内容</button>

        <button onclick="setFocus()">使编辑器获得焦点</button>

        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>

        <button onmousedown="setblur(event)" >编辑器失去焦点</button>

    </div>

    <div>

        <button onclick="getText()">获得当前选中的文本</button>

        <button onclick="insertHtml()">插入给定的内容</button>

        <button id="enable" onclick="setEnabled()">可以编辑</button>

        <button onclick="setDisabled()">不可编辑</button>

        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>

        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>

        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>

    </div>

    <div>

        <button onclick="getLocalData()" >获取草稿箱内容</button>

        <button onclick="clearLocalData()" >清空草稿箱</button>

    </div>

</div>

<div>

    <button onclick="createEditor()">

    创建编辑器</button>

    <button onclick="deleteEditor()">

    删除编辑器</button>

</div>

<script type="text/javascript">

    //实例化编辑器

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

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

    function isFocus(e){

        alert(UE.getEditor('editor').isFocus());

        UE.dom.domUtils.preventDefault(e)

    }

    function setblur(e){

        UE.getEditor('editor').blur();

        UE.dom.domUtils.preventDefault(e)

    }

    function insertHtml() {

        var value = prompt('插入html代码', '');

        UE.getEditor('editor').execCommand('insertHtml', value)

    }

    function createEditor() {

        enableBtn();

        UE.getEditor('editor');

    }

    function getAllHtml() {

        alert(UE.getEditor('editor').getAllHtml())

    }

    function getContent() {

        var arr = [];

        arr.push("使用editor.getContent()方法可以获得编辑器的内容");

        arr.push("内容为：");

        arr.push(UE.getEditor('editor').getContent());

        alert(arr.join("\n"));

    }

    function getPlainTxt() {

        var arr = [];

        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");

        arr.push("内容为：");

        arr.push(UE.getEditor('editor').getPlainTxt());

        alert(arr.join('\n'))

    }

    function setContent(isAppendTo) {

        var arr = [];

        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");

        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);

        alert(arr.join("\n"));

    }

    function setDisabled() {

        UE.getEditor('editor').setDisabled('fullscreen');

        disableBtn("enable");

    }

    function setEnabled() {

        UE.getEditor('editor').setEnabled();

        enableBtn();

    }

    function getText() {

        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容

        var range = UE.getEditor('editor').selection.getRange();

        range.select();

        var txt = UE.getEditor('editor').selection.getText();

        alert(txt)

    }

    function getContentTxt() {

        var arr = [];

        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");

        arr.push("编辑器的纯文本内容为：");

        arr.push(UE.getEditor('editor').getContentTxt());

        alert(arr.join("\n"));

    }

    function hasContent() {

        var arr = [];

        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");

        arr.push("判断结果为：");

        arr.push(UE.getEditor('editor').hasContents());

        alert(arr.join("\n"));

    }

    function setFocus() {

        UE.getEditor('editor').focus();

    }

    function deleteEditor() {

        disableBtn();

        UE.getEditor('editor').destroy();

    }

    function disableBtn(str) {

        var div = document.getElementById('btns');

        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");

        for (var i = 0, btn; btn = btns[i++];) {

            if (btn.id == str) {

                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);

            } else {

                btn.setAttribute("disabled", "true");

            }

        }

    }

    function enableBtn() {

        var div = document.getElementById('btns');

        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");

        for (var i = 0, btn; btn = btns[i++];) {

            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);

        }

    }

    function getLocalData () {

        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));

    }

    function clearLocalData () {

        UE.getEditor('editor').execCommand( "clearlocaldata" );

        alert("已清空草稿箱")

    }

</script>

</body>

</html>

在java端的application.properties或yml中加入:

#ueditor文件上传路径

web.upload-path=E:/   <<按需改为linux路径

spring.mvc.static-path-pattern=/**

#静态资源,ueditor文件上传路径

spring.resources.static-locations=classpath:/static/,file:${web.upload-path}

同时在ueditor.json或原本的config.json中需要更改basePath和web.upload-path一致(图片/文件上传路径)

其它比较重要的如ConfigManager,3个js文件(ueditor.all.js,ueditor.config.js,ueditor.parse.js),一个ueditor.json文件.

"basePath":"/www/server/apache-tomcat-8.5.32/webapps/ROOT/images/",/* 上传文件的基本路径 */

百度UEditor富文本插件的使用的更多相关文章

百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下下载UEditor 官网:下载地址将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
spring boot 整合百度ueditor富文本
百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本 ...
vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
百度UEditor(富文本编辑器)的基础用法
百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的. 我用是的SSH来写的项目. 1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到W ...
在IntelliJ IDEA 中配置Ueditor富文本插件
这是我自学的配置教程,刚刚学习不太完善请谅解! 我会根据我的学习进程对此进行更贴,欢迎关注哦 ! 第一步:下载插件,地址:http://ueditor.baidu.com/website/downlo ...
百度UEditor富文本编辑器去除过滤div等标签
将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签. 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代 ...

随机推荐

python3+requests：post请求四种传送正文方式
https://www.cnblogs.com/insane-Mr-Li/p/9145152.html 前言:post请求我在python接口自动化2-发送post请求详解(二)已经讲过一部分了,主要 ...
idea 中激活 JRebel
JRebel介绍: JRebel是一款JVM插件,它使得Java代码修改后不用重启系统,立即生效.IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,修改才能 ...
bat批处理删除多少天前的文件
@echo off ::演示:删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件. ::如果演示结果无误,把del前面的echo去掉,即可实现真正删除. ::本例需要Win2003/Vist ...
Java调用WebService方法总结(7)--CXF调用WebService
CXF = Celtix + XFire,继承了Celtix和XFire两大开源项目的精华,是一个开源的,全功能的,容易使用的WebService框架.文中所使用到的软件版本:Java 1.8.0_1 ...
C++ | 使用const std::map，map::[]时遇到的一个bug
原函数简化后如下: void fun(const map<int,vector<int>> &mp, int index) { for (auto tmp : mp[i ...
springboot+security整合（2）自定义校验
说明 springboot 版本 2.0.3源码地址:点击跳转系列 springboot+security 整合(1) springboot+security 整合(2) springboot+se ...
org.w3c.dom document 和xml 字符串互转
转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...
笔谈FFmpeg（一）
现在的工作是播放器库的开发,可不是调用iOS系统自带的播放器框架进行一些简单的功能和界面定制,这些没什么含量.涉及iOS开发有3个年头了,现在的工作算是有点含金量了.涉及播放器的开发,FFmpeg的架 ...
2.kafka 分布式集群安装
Kafka集群安装主节点h201,从节点h202.h2031.安装jdk1.8[hadoop@h201 ~]$ /usr/jdk1.8.0_144/bin/java -version 2.安装zook ...
MyBatis-Migrations安装和使用
这里本人是在MAC机上安装使用 1. 下载 mybatis-migraions安装包,地址:https://www.oschina.net/news/94218/mybatis-migrations- ...

百度UEditor富文本插件的使用

百度UEditor富文本插件的使用的更多相关文章

随机推荐

热门专题