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

随机推荐

pip下载加速的方式
两种方式一.临时方式可以在使用pip的时候加参数-i https://pypi.tuna.tsinghua.edu.cn/simple. 例如下载或者更新: 下载:pip install -i h ...
shell 学习笔记9-while/until循环语句
一.while循环语句 1.循环语句循环愈久就是重复执行一条指令或一组执行,知道条件不在满足时停止,shell循环语句包括,while.until.for.select语句 2.while循环主要 ...
【转】webpack4安装过程遇到的问题及处理方法
随便百度一下,安装使用webpack的教程铺天盖地,安装一步步来,最后的最后打包没反应......,浪费了不少的时间. 这里我要提醒一下,如果安装webpack1,2,3按照百度上的教程应该不会有问题 ...
2019年北航OO第三次博客总结
一.JML语言理论基础及其工具链 1. JML语言理论基础 JML是用于对Java程序进行规格化设计的一种表示语言,是一种行为接口规格语言(Behavior Interface Specificati ...
android RecyclerView的瀑布流布局案例
1.先创建 activity_water_fall.xml 和 activity_water_fall_item.xml <?xml version="1.0" encodi ...
Git和GitHub在线学习资源整理
电子书 GotGitHub Git Workflow 沉浸式学习Git 文章 GitHub Fundamental visual-git-guide 图形化的Git参考手册 Linux下使用git命令 ...
MySQL Backup--Xtrabackup远程备份和限速备份
使用xbstream 备份到远程服务器 ##xbstream 备份到远程服务器 innobackupex \ --defaults-file="/export/servers/mysql/e ...
workman 使用心得
1. 服务端调试: 直接在 Events.php 中 echo 变量, 即可在命令行工具中看到输出的信息. 以便进行调试. 2. 客户端调试: 由于是js代码, 可以直接用 conso ...
Scrapy 概览笔记
本项目代码可参考 imzhizi/myspider: a scrapy demo with elasticsearch 虚拟环境的创建建议爬虫项目都创建虚拟环境虚拟环境在 Python 项目中真的 ...
flutter入门开发的一些坑
flutter入门开发的一些坑很久没写博客了,最近在准备物联网比赛,顺便抽出时间学习了一下flutter,花了近2周完成了一个查看博客博文的一个小的APPdemo,随便截了两张图,如下: 首页博客 ...

百度UEditor富文本插件的使用

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

随机推荐

热门专题