2. 程式人生 > >SSH2專案引入百度富文字編輯器Ueditor編輯器

SSH2專案引入百度富文字編輯器Ueditor編輯器

阿新 • • 發佈：2019-01-28

一、整合所需UEditor原始碼


這個可以到http://ueditor.baidu.com/website/download.html#ueditor下載相應版本。

二、導包


把上述包拷貝到WEB-INF的lib下

三、JSP頁面處理

[javascript] view plain copy print?
  1. <script type=“text/javascript” charset=“utf-8” src=“<%= path%>/ueditor/ueditor.config.js”></script>  
  2.    <script type=”text/javascript”
     charset=“utf-8” src=“<%= path%>/ueditor/ueditor.all.min.js”> </script>  
  3.    <script type=”text/javascript” charset=“utf-8” src=“<%= path%>/ueditor/lang/en/en.js”> </script>  
 <script type="text/javascript" charset="utf-8" src="<%= path%>/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%= path%>/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="<%= path%>/ueditor/lang/en/en.js"> </script>
[javascript] view plain copy print?
  1. <script id=“editor” name=“newscontent” type=“text/plain” style=“width:800px;height:500px;”>  
  2.         </script>  
<script id="editor" name="newscontent" type="text/plain" style="width:800px;height:500px;">

        </script>
[html] view plain copy print
?
  1. <script>
  2.     //例項化編輯器  
  3.     //建議使用工廠方法getEditor建立和引用編輯器例項，如果在某個閉包下引用該編輯器，直接呼叫UE.getEditor(‘editor’)就能拿到相關的例項  
  4.     var ue = UE.getEditor(‘editor’);  
  5. </script>
<script>
    //例項化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器例項，如果在某個閉包下引用該編輯器，直接呼叫UE.getEditor('editor')就能拿到相關的例項
    var ue = UE.getEditor('editor');
</script>
id為editor為顯示編輯框處。

四、修改config.json和ueditor.config.js

 config.json的”imageUrlPrefix”: “http://127.0.0.1:8080/myproject”, /* 圖片訪問路徑字首 */
ueditor.config.js的  var URL = window.UEDITOR_HOME_URL || ”/myproject/ueditor/”;  把myproject改成專案名稱。 五、錯誤處理，可能出現的錯誤 ① java.lang.NoSuchMethodError: org.apache.commons.io.FileUtils.getTempDirectory()Ljava/io/File;  包衝突，commons-io包有多個，刪除其他，只留commons-io-2.4.jar，確保部署檔案中也刪除後重啟服務檢視是否解決，不排除其他包衝突所致。 ②“ 未找到上傳資料 ” 修改struts過濾器，先新增filter類：[java] view plain copy print?
  1. package com.util;  
  2. import java.io.IOException;  
  3. import javax.servlet.FilterChain;  
  4. import javax.servlet.ServletException;  
  5. import javax.servlet.ServletRequest;  
  6. import javax.servlet.ServletResponse;  
  7. import javax.servlet.http.HttpServletRequest;  
  8. import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;  
  9. publicclass UeditorFilter extends StrutsPrepareAndExecuteFilter{  
  10.     @Override
  11.     publicvoid doFilter(ServletRequest req, ServletResponse res,  
  12.             FilterChain chain) throws IOException, ServletException {  
  13.         HttpServletRequest request = (HttpServletRequest) req;  
  14.         String url = request.getRequestURI();           
  15.         System.out.println(url);           
  16.         if (url.contains(“/ueditor/jsp/”)) {               
  17.             System.out.println(”使用自定義過濾器”);               
  18.             chain.doFilter(req, res);           
  19.         }else{               
  20.             System.out.println(”使用預設過濾器”);               
  21.             super.doFilter(req, res, chain);           
  22.         }   
  23.     }  
  24. }  
package com.util;
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 UeditorFilter extends StrutsPrepareAndExecuteFilter{
    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        String url = request.getRequestURI();         
        System.out.println(url);         
        if (url.contains("/ueditor/jsp/")) {             
            System.out.println("使用自定義過濾器");             
            chain.doFilter(req, res);         
        }else{             
            System.out.println("使用預設過濾器");             
            super.doFilter(req, res, chain);         
        } 
    }
}

再配置web.xml:

[html] view plain copy print?
  1. <!– ueditor start–>
  2.     <filter>
  3.         <filter-name>struts2</filter-name>
  4.         <filter-class>com.juhu.util.UeditorFilter</filter-class>
  5.     </filter>
  6.     <filter-mapping>
  7.         <filter-name>struts2</filter-name>
  8.         <url-pattern>/*</url-pattern>
  9.         <dispatcher>REQUEST</dispatcher>
  10.         <dispatcher>FORWARD</dispatcher>
  11.     </filter-mapping>
  12.     <!– ueditor end –>
<!-- ueditor start-->
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>com.juhu.util.UeditorFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
    </filter-mapping>
    <!-- ueditor end -->

配置成功之後，接下來看後臺如何儲存資料。。。

一、jsp程式碼

[html] view plain copy print?
  1. <s:formaction=“../adminAction!addNews”method=“post”enctype=“multipart/form-data”theme=“simple”>
  2.                        <divclass=“form-group”>
  3.                         <labelclass=“col-lg-2 control-label”>新聞型別</label>
  4.                         <divclass=“col-lg-9”>
  5.                                 <selectclass=“btn btn-default dropdown-toggle”name=“newstype”><!– 新聞型別 1公司動態 2行業動態 –>
  6.                                     <optionvalue=“1”>公司動態</option>
  7.                                     <optionvalue=“2”>行業動態</option>
  8.                                 </select>
  9.                         </div>
  10.                     </div>
  11.                     <divclass=“form-group”>
  12.                         <labelclass=“col-lg-2 control-label”>標題</label>
  13.                         <divclass=“col-lg-9”>
  14.                             <inputtype=“text”name=“newstitle”class=“form-control”placeholder=“請填寫新聞標題”>
  15.                         </div>
  16.                     </div>
  17.                     <divclass=“form-group”>
  18.                         <labelclass=“col-lg-2 control-label”>新聞正文</label>
  19.                         <divclass=“col-lg-9”>
  20.                             <scriptid=“editor”name=“newscontent”type=“text/plain”style=“width:800px;height:500px;”>
  21.                             </script>
  22.                         </div>
  23.                     </div>
  24.                     <palign=“center”>首頁顯示圖片上傳：</p>
  25.                                 <center>
  26.                                     <fontcolor=“red”><s:fielderror/></font>
  27.                                     <s:filename=“image”label=“檔案”></s:file>
  28.                                 </center>
  29.                        <divclass=“form-group”>
  30.                            <divclass=“col-sm-offset-2 col-sm-10”>
  31.                               <!–  <button type=”submit” id=”submit-order” data-loading-text=”正在儲存…” class=”btn btn-primary”>儲存</button> –>
  32.                                 <inputtype=“submit”value=“儲存”>
  33.                            </div>
  34.                        </div>
  35.                    </s:form>
 <s:form action="../adminAction!addNews" method="post" enctype="multipart/form-data" theme="simple">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">新聞型別</label>
                            <div class="col-lg-9">
                                    <select  class="btn btn-default dropdown-toggle"  name="newstype"><!-- 新聞型別 1公司動態 2行業動態 -->
                                        <option value="1">公司動態</option>
                                        <option value="2">行業動態</option>
                                    </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 control-label">標題</label>
                            <div class="col-lg-9">
                                <input type="text" name="newstitle" class="form-control" placeholder="請填寫新聞標題">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">新聞正文</label>
                            <div class="col-lg-9">
                                <script id="editor" name="newscontent" type="text/plain" style="width:800px;height:500px;">

                                </script>
                            </div>
                        </div>
                        <p align="center">首頁顯示圖片上傳：</p>
                                    <center>
                                        <font color="red"><s:fielderror/></font>
                                        <s:file name="image" label="檔案"></s:file>
                                    </center>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                               <!--  <button type="submit" id="submit-order" data-loading-text="正在儲存..." class="btn btn-primary">儲存</button> -->
                                <input type="submit"  value="儲存">
                            </div>
                        </div>
                    </s:form>

主要要注意表格form的一些屬性和文字框的name屬性，文字框的name需要在後臺使用。

二、java後臺程式碼

[java] view plain copy print?
  1. publicvoid addNews() throws IOException{  
  2.         User user = (User) session.get(”adminuser”);  
  3.         News newstemp = new News();  
  4.         newstemp.setState(1);  
  5.         newstemp.setAuthor(user.getName());  
  6.         Date d = new Date();  
  7.         newstemp.setCreatetime(new Timestamp(System.currentTimeMillis()));  
  8.         String root = ServletActionContext.getRequest().getRealPath(”/upload”);  
  9.         DiskFileItemFactory factory = new DiskFileItemFactory();    
  10.         ServletFileUpload upload = new ServletFileUpload(factory);  
  11.         try {  
  12.             List items = upload.parseRequest(ServletActionContext.getRequest());  
  13.             Iterator it = items.iterator();  
  14.             while (it.hasNext()) {  
  15.                 FileItem item = (FileItem) it.next();  
  16.                 if (item.isFormField()) { // 如果是表單域
  17.                     if (item.getFieldName().equals(“newstype”)) {  
  18.                         String newstype = item.getString(”UTF-8”);  
  19.                         System.out.println(”newstype…”+newstype);  
  20.                         newstemp.setType(Integer.parseInt(newstype));  
  21.                     }  
  22.                     if (item.getFieldName().equals(“newstitle”)) {  
  23.                         String newstitle = item.getString(”UTF-8”);  
  24.                         System.out.println(”newstitle…”+newstitle);  
  25.                         newstemp.setTitle(newstitle);  
  26.                     }  
  27.                     if (item.getFieldName().equals(“newscontent”)) {  
  28.                         String newscontent = item.getString(”UTF-8”);  
  29.                         System.out.println(”newscontent…”+newscontent);  
  30.                         newstemp.setContent(newscontent);  
  31.                     }  
  32.                 } else { // 如果是檔案,暫時沒有跟新聞相關的檔案，如果後期加新聞標圖可以使用
  33.                     if (item.getName() != null && !item.getName().equals(“”)) {  
  34.                         File file = new File(root,item.getName());  
  35.                         //newstemp.setNewsimages(“upload/”+item.getName());
  36.                         //item.write(file);
  37.                     }  
  38.                 }  
  39.             }  
  40.             adminService.addNews(newstemp);  
  41.         } catch (Exception e) {  
  42.             e.printStackTrace();  
  43.             System.err.println(”上傳檔案不成功！”);  
  44.         }  
  45.         String tempUrl = ”admin/newsadd.jsp”;  
  46.         try {  
  47.             CommonUtil.printResult(ServletActionContext.getResponse(), ”<script >” + “alert(‘新增成功！’);location=’” + tempUrl  
  48.                     + ”’</script>”);  
  49.         } catch (IOException e) {  
  50.             e.printStackTrace();  
  51.         }   
  52.     }  
public void addNews() throws IOException{
        User user = (User) session.get("adminuser");
        News newstemp = new News();
        newstemp.setState(1);
        newstemp.setAuthor(user.getName());
        Date d = new Date();
        newstemp.setCreatetime(new Timestamp(System.currentTimeMillis()));
        String root = ServletActionContext.getRequest().getRealPath("/upload");
        DiskFileItemFactory factory = new DiskFileItemFactory();  
        ServletFileUpload upload = new ServletFileUpload(factory);
        try {
            List items = upload.parseRequest(ServletActionContext.getRequest());
            Iterator it = items.iterator();
            while (it.hasNext()) {
                FileItem item = (FileItem) it.next();
                if (item.isFormField()) { // 如果是表單域
                    if (item.getFieldName().equals("newstype")) {
                        String newstype = item.getString("UTF-8");
                        System.out.println("newstype..."+newstype);
                        newstemp.setType(Integer.parseInt(newstype));
                    }
                    if (item.getFieldName().equals("newstitle")) {
                        String newstitle = item.getString("UTF-8");
                        System.out.println("newstitle..."+newstitle);
                        newstemp.setTitle(newstitle);
                    }
                    if (item.getFieldName().equals("newscontent")) {
                        String newscontent = item.getString("UTF-8");
                        System.out.println("newscontent..."+newscontent);
                        newstemp.setContent(newscontent);
                    }
                } else { // 如果是檔案,暫時沒有跟新聞相關的檔案，如果後期加新聞標圖可以使用
                    if (item.getName() != null && !item.getName().equals("")) {
                        File file = new File(root,item.getName());
                        //newstemp.setNewsimages("upload/"+item.getName());
                        //item.write(file);
                    }
                }
            }
            adminService.addNews(newstemp);
        } catch (Exception e) {
            e.printStackTrace();
            System.err.println("上傳檔案不成功！");
        }
        String tempUrl = "admin/newsadd.jsp";
        try {
            CommonUtil.printResult(ServletActionContext.getResponse(), "<script >" + "alert('新增成功！');location='" + tempUrl
                    + "'</script>");
        } catch (IOException e) {
            e.printStackTrace();
        } 
    }
jsp中文字框name屬性跟上述的newstype、newstitle等對應相同。

三、struts.xml配置程式碼

[html] view plain copy print?
  1. <!– uditor上傳相關start –>
  2.     <beantype=“org.apache.struts2.dispatcher.multipart.MultiPartRequest”
  3.     name=“myRequestParser”class=“com.util.RequestParseWrapper”
  4.     scope=“default”optional=“true”/>
  5.     <constantname=“struts.multipart.handler”value=“myRequestParser”/>
  6.     <!– uditor上傳相關end –>
<!-- uditor上傳相關start -->
    <bean type="org.apache.struts2.dispatcher.multipart.MultiPartRequest"
    name="myRequestParser" class="com.util.RequestParseWrapper"
    scope="default" optional="true" />
    <constant name="struts.multipart.handler" value="myRequestParser" />
    <!-- uditor上傳相關end -->
放在<struts>下，如果沒有加這段程式碼後臺保程式碼中會報List items = upload.parseRequest(ServletActionContext.getRequest());
Iterator it = items.iterator();的items、it為空
四、RequestParseWrapper類 [java] view plain copy print?
  1. import java.io.IOException;  
  2. import javax.servlet.http.HttpServletRequest;  
  3. import org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest;  
  4. publicclass RequestParseWrapper extends JakartaMultiPartRequest {  
  5.     publicvoid parse(HttpServletRequest servletRequest, String saveDir)  
  6.             throws IOException {  
  7.     }  
  8. }  
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest;

public class RequestParseWrapper extends JakartaMultiPartRequest {
    public void parse(HttpServletRequest servletRequest, String saveDir)
            throws IOException {

    }
}

五、用pre顯示文章，有時預設情況下，<pre /> 標籤中的內容若超出範圍不會自動換行，會把div撐破，或者看不到部分內容解決方法給pre加樣式：

[css] view plain copy print?
  1. <style type=“text/css”>  
  2.         pre {white-space: pre-wrap;  
  3.         white-space: -moz-pre-wrap;  
  4.         white-space: -pre-wrap;  
  5.         white-space: -o-pre-wrap;  
  6.         word-wrap: break-word;  
  7.         white-space : normal ;      }  
  8.     </style>  
<style type="text/css">
        pre {white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space : normal ;      }
    </style>
完成!

相關推薦

SSH2專案引入百度富文字編輯器Ueditor編輯器

一、整合所需UEditor原始碼 這個可以到http://ueditor.baidu.com/website/download.html#ueditor下載相應版本。 二、導包 把上述包拷貝到WEB-INF的lib下 三、JSP頁面處理 [javascript] view plain copy pr

ssm+maven專案中加入“百度富文字編輯器”，實現圖片上傳

1.在UEditor官方下載編輯器。2.解壓壓縮檔案到資料夾，因為預設的資料夾名字過長，建議重新命名一下資料夾名，我這裡命名為ueditor資料夾中對應的目錄為3.將整個資料夾copy到專案webapp目錄下，（我這裡用的是IDEA，不知道什麼原因直接往IDEA開啟的專案裡拷

百度富文字編輯器的多圖上傳單獨放在專案

線上搜尋的功能不是很好用，有待改進！需要改ueditor/php/config.json檔案的路徑 "imagePathFormat": "/upload/{filename}",/* 上傳儲存路

百度富文字編輯器ueditor的使用、非空校驗、引用預定義模板

最近用到百度ueditor編輯器，遇到了很多問題，總結一下ueditor的使用、非空校驗、引用預先寫好的模板。 一、百度ueditor編輯器簡單使用： 1.在百度官網http://ueditor.baidu.com/website/download.html下載壓縮包，解壓之後整體拷

關於百度富文字編輯器整合到springboot的超級詳細總結

參考文章：https://blog.csdn.net/qq_33745799/article/details/70031641 如何整合就不講了，但是有幾點需要注意的，這是我踩過的坑 上面介紹的部落格,第8步，接通http://localhost:8080/config?action=con

laravel-admin整合百度富文字編輯器ueditor

首先要說的是laravel-admin真的是一個非常適合做管理後臺的package。 官方文件有整合wangEditor、ckeditor、PHP editor的示例，如果這幾個編輯器能滿足你的需求可以參照官方文件操作。 ueditor是百度開源的一款編輯器，其中它

ueditor百度富文字編輯器linux下報錯: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the file system

具體報錯資訊如下 java.io.FileNotFoundException: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the fi

vue 整合ueditor（百度富文字編輯器）以及使用後端Java上傳圖片到伺服器，特別注意的大坑

    1.import 引入ueditor時，在封裝元件中引入，不要在mian.js內引入，在main.js內引入會造成 1.Uncaught SyntaxError: Unexpected token : 這種錯誤，屬於是跨域問題，目前不清楚是什麼原因和原理，

百度富文字編輯器UEditor使用簡單示例

HTML程式碼： <form id="f_edit" method="post"> <input name="id" type="hidden" value="${activit

【在MVC中應用百度富文字編輯器】

1.下載.NET版本的百度富文字編輯器，前往 下載.NET版本百度富文字框  2.解壓下載的.zip壓縮包，將utf8-.net資料夾名稱改為：ueditor，複製到MVC根目錄下面。結構如下: App_Code 上的檔案是應用程式的原始碼 Config.cs 負

react 0.14中使用百度富文字編輯器

2017年12月01日 15:59:33 lz101281 閱讀數：1293 標籤： ie 8 語言

百度富文字編輯器UMeditor使用

1、外掛官方下載地址：2、解壓下載的外掛包，將裡面的檔案放到web專案的根目錄下面，同時將裡面的JAR複製到lib資料夾下3、將umeditor.config.js、umeditor.mini.js引入到WEB頁面var um = UM.getEditor('myEdit

PHP接入umeditor(百度富文字編輯器)

百度官網上下載 umeditor 簡版的富文字編輯器(這裡) <!DOCTYPE HTML> <html> <head> <title>UMEDITOR 完整demo</title> <met

百度富文字編輯器Ueditor的使用

前言 最近專案需要整合一個編輯器，於是聽從了同事的推薦用的是百度的Ueditor，整合很順利，本地也很順利，然後部署到linux上就各種不能用。。。 期間也百度了很多的帖子，但是多數帖子都是使用的舊

百度富文字在vue專案中的使用

百度富文字配置這裡不做過多的說明，詳情請參看官網文件，http://fex.baidu.com/ueditor/#start-config 定義富文字單獨的元件 <template> <script ref="editor" type="text/

關於使用百度富文字編輯器UE重新載入資料的問題

在初始化的時候UE.getEditor("editor").addListener("ready", function () {       UE.getEditor('editor').setContent(data.data);}); 需要使用這樣的方法來進行資料初始化

使用百度富文字編輯器UEditor碰到的問題

前面使用的是kindEditor，但是發現這個已經不再維護，並且bug不少，而我又不會改，哈哈，所以我就放棄了。 原來想過要用百度的這個UEditor,但是在配置的時候遇到了很多問題，基本上載入不出來，但是最後還是硬著頭皮把那些bug都解決了，順利跑通。 問題1：按百度Demo的配置我發現連最基本的編

百度富文字編輯器UEditor的使用總結

在你的web工程或網站根目錄下，新建一個名稱叫ueditor資料夾，把下載ueditor解壓後貼上到你新建的這個資料夾中4.在你的jsp頁面中一如富文字編輯器    1.引入相關js和css       <script type="text/javascript" src="${basePath}/ad

編輯器 UEditor 百度富文字web編輯器

UEditor是由百度web前端研發部開發所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點，開源基於MIT協議，允許自由使用和修改程式碼… UMeditor,簡稱UM,是為滿足廣大入口網站對於簡單發帖框，或者回復框需求所定製的線上富文字

百度富文字編輯器UEditor的使用和他的圖片上傳

最近在做一個新聞釋出系統的小專案，需要用到富文字編輯器這個東東，於是上網搜了下，白活兩天給白活出來了，接下來談談我對百度富文字編輯器的使用心得： 要想使用這個富文字編輯器，首先呢得從百度官網上下載，文章最後我會貼出來資源的連結，大家可以直接下載哈~ 下載完成之後呢，解壓，目