百度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,找到如下的代 ...

随机推荐

关于django操作orm的一些事--反向生成orm、连接多个数据库
1. django反向生成orm的类代码使用命令python manage.py inspectdb > app01/models.py,注意,我这里的app01是app的名字. 2.djan ...
Scratch编程：漂亮的时钟（九）
“ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍这节我们将绘制一个漂亮的.会走动时钟. 02 — 设计思 ...
spring boot使用@Aspect记录日志（请求参数，响应结果）
未能加载文件或程序集system.web.extensions解决方法
发现未能加载文件或程序集的错误,这是由于我的机器上没有安装Ajax的原因.问题解决后,整理如下:表现:1.＂System.Web.Extensions, Version=1.0.61025.0, Cu ...
如何在Oracle触发器中使用查询语句
通常情况下,Oracle数据库禁止在行级触发器或行级触发器所调用的子程序中使用查询语句.但是,面对复杂的业务逻辑,不可避免的要使用查询语句. 当在行级触发器中使用查询语句时,Oracle数据库会抛出O ...
ZeroMQ自查手册
简介 ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在 ...
嵌入式处理器通过UART实现scanf和printf
#include <stdint.h> #include <stdarg.h> extern int vsscanf(const char *, const char *, v ...
详解html中的marquee属性
转自:https://www.jb51.net/web/531309.html 该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可 ...
js 字节操作
获取byte的高4位bit和低4位bit function getHeight4(ata){//获取高四位 int height; height = ((data & 0xf0) >&g ...
IIS-This configuration section cannot be used at this path.
Q:在IIS上部署web后,游览器打开报以下异常: This configuration section cannot be used at this path. This happens when ...

百度UEditor富文本插件的使用

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

随机推荐

热门专题