百度UEditor富文本插件的使用

時間 2020-05-25

標籤百度 ueditor 文本插件使用简体版

原文原文鏈接

這個富文本仍是功能挺全的.javascript

官方文檔地址css

下載地址html

經常使用接口前端

較完整代碼倉庫java

UEditor下載後直接運行便可訪問,但在上傳文件時須要單獨再作配置.jquery

[很詳細的SpringBoot整合UEditor教程]
linux

可選的依賴文件,本案例不採用:git

<dependency>
            <groupId>net.mingsoft</groupId>
            <artifactId>ms-ueditor</artifactId>
            <version>1.0.2</version>
        </dependency>

官方的demo就很少說了.github

下面是我設置的富文本,其中能夠進行富文本大小的拉縮.當提交數據時,使用 UE.getEditor('container').getContent() 便可獲取富文本內容.web

若是是發表新聞的話,能夠把標題,做者等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/",/* 上傳文件的基本路徑 */

相關標籤/搜索

不使用插件

富文本