百度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/",/* 上传文件的基本路径 */






其它富文本还有类似TINYMCE, WANGEDITOR...

posted @ 2019-05-17 21:59 ukyo--夜王阅读(7493) 评论(0) 编辑收藏举报

刷新页面返回顶部

奇奇怪怪能量屋

好奇心打败

百度UEditor富文本插件的使用

公告