1.01^365=37.78 (Lucene、ES、ELK開發交流群: 370734940)

阿新 • • 發佈：2018-12-23

使用表單不能編輯新聞格式，這篇部落格會介紹如何使用ueditor富文字編輯器來編輯新聞。使用ueditor編輯的新聞儲存到資料庫中的是html程式碼，並且帶有css樣式，在後臺可以像編輯word一樣編輯新聞。

一、匯入ueditor檔案

關於ueditor的配置請參考官網JSP 使用說明和我的另外一篇部落格jsp專案中使用UEditor富文字編輯器。在WebContent目錄下新建ueditor資料夾，匯入ueditor配置檔案：
這裡寫圖片描述

二、修改newspost.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" 

    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script 
 type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8"
    src="ueditor/lang/zh-cn/zh-cn.js"></script>
<title>新聞釋出</title>
<script type="text/javascript">
    function modifyContent() {
        alert("works" 
);
        var content = document.getElementById("content");

        var arr = [];

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

        content.value = arr;

    }
</script>
<style type="text/css">
input {
    height: 30px;
    width: 300px;
    border-radius: 5px;
}
</style>
</head>
<body>
    <s:form action="news-save" method="post" onsubmit="modifyContent()">
        <s:textfield name="title" label=" 新聞標題"></s:textfield>
        <s:textfield name="author" label="新聞作者"></s:textfield>
        <s:textfield name="source" label="新聞來源"></s:textfield>
        <s:textfield name="posttime" label="釋出時間"></s:textfield>
        <s:textarea style="display:none" rows="15" cols="50" name="content"
            id="content"></s:textarea>

        <tr>
            <td colspan="2">
                <div>
                    <p>新聞內容:</p>
                    <script id="editor" type="text/plain"
                        style="width: 1024px; height: 500px;"></script>
                </div>
            </td>
        </tr>
        <s:submit value="錄入"></s:submit>
    </s:form>



    <!-- <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(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>

三、使用自定義攔截器

新建cn.ac.ucas.filter,新建MyStrutsFilter類，繼承StrutsPrepareAndExecuteFilter類：

package cn.ac.ucas.filter;

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

public class MyStrutsFilter  extends StrutsPrepareAndExecuteFilter{  
        public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {    
            HttpServletRequest request = (HttpServletRequest) req;    
            //不過濾的url    
            String url = request.getRequestURI();    
            System.out.println(url);    
            if ("/sshnews/ueditor/jsp/controller.jsp".equals(url)) {  //注意路徑  
                System.out.println("使用自定義的過濾器");    
                chain.doFilter(req, res);    
            }else{    
                System.out.println("使用預設的過濾器");    
                super.doFilter(req, res, chain);    
            }    
        } 
}

四、修改ue配置檔案

開啟ueditor/jsp/config.json，imageUrlPrefix屬性值為工程名：

 "imageUrlPrefix": "/sshnews", /* 圖片訪問路徑字首 */

五、測試

編輯一篇新聞：
這裡寫圖片描述

新聞顯示結果：
這裡寫圖片描述

檢視資料庫可以看到News的content屬性的值是具有css樣式的html程式碼。
這裡寫圖片描述
總結：
1.這篇部落格配置了ueditor，把ueditor編輯的新聞內容使用js複製給content表單存入資料庫
2.自定義攔截器實現圖片上傳
3.關於ueditor的使用可以參考官方文件進行配置。

1.01^365=37.78 (Lucene、ES、ELK開發交流群: 370734940)

一、匯入ueditor檔案

二、修改newspost.jsp

三、使用自定義攔截器

四、修改ue配置檔案

五、測試

1.01^365=37.78 (Lucene、ES、ELK開發交流群: 370734940)

解決引用 System.Windows.Interactivity程式集生成多國語言資料夾fr、es、ja等問題

一鍵快速搭建mysql、redis、mongodb、es、rabbitmq環境

zabbix 監控hbase、es、hadoop程序，發出報警和遠端重啟服務。

調試大叔V1.0.1(2017.09.01)|http/s接口調試、數據分析程序員輔助開發神器

elasticsearch-1.7.1 (es Windows 64) 安裝、啟動、停止的詳細記錄

Elasticsearch核心技術(1)--- Docker容器中執行ES、Kibana、Cerebro

8.1 加減日、月、年

Rancher 1.6發布：EBS支持、密文管理和CLI增強

2.7.1 元素定位：selenium消息框處理（alert、confirm、prompt）

Canvas入門（1）：繪制矩形、圓、直線、曲線等基本圖形

EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用詳解

Charles Proxy v4.1.3 Mac、Win64、Win32破解版

1、電腦聯網小技巧：網絡共享之臺式機、筆記本、手機

46、求1+2+3+...+n，要求不能使用乘除法、for、while、if、else、switch、case等關鍵字及條件判斷語句（A?B:C）。

【讀書筆記】計算機網絡1章：課程介紹、協議、分層

python中列表的pop、remove、-1

leetcode算法題1: 兩個二進制數有多少位不相同？異或、位移、與運算的主場

linux集群系列(1) --- LVS之load balancing（NET、DR、TUN）

慕課網Java入門第二季6.1 達達租車系統，使用到繼承、重寫、多態、toString函數

1.01^365=37.78 (Lucene、ES、ELK開發交流群: 370734940)

一、匯入ueditor檔案

二、修改newspost.jsp

三、使用自定義攔截器

四、修改ue配置檔案

五、測試

相關推薦