1. 程式人生 > >Editor富文本編輯器配置【不含圖片上傳】

Editor富文本編輯器配置【不含圖片上傳】

初始化 src rip eba portal tar family 根據 utf

一,下載地址:http://ueditor.baidu.com/website/download.html

  1)根據需要下載相應版本

    例 Java:選擇jsp+utf-8;

二,放置在項目中

  1)解壓下載文件,並重命名為editor;

  2)復制文件放置在項目webapp目錄下;

  3)把editor目錄下的js文件(3個)剪切放在你的js文件目錄下;

  4)復制editor內全部文件到js目錄一份(不復制可以使用,但頁面會報404錯誤,估計是在初始化時需要訪問其他文件)

三,配置靜態資源映射

  1)在Springmvc.xml配置文件中配置相應屬性(前提是已經在web.xml中配置了相應配置);

    web.xml配置:  

          <servlet>
          <servlet-name>portal</servlet-name>
          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
          <!-- contextConfigLocation不是必須的, 如果不配置contextConfigLocation,

          springmvc的配置文件默認在:WEB-INF/servlet的name+"-servlet.xml" -->
          <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:spring/springmvc.xml</param-value>
          </init-param>
          <load-on-startup>1</load-on-startup>
          </servlet>


          <servlet-mapping>
          <servlet-name>portal</servlet-name>
          <url-pattern>/</url-pattern>
          </servlet-mapping>

    Springmvc配置:    

          <mvc:resources mapping="/umeditor/**" location="/umeditor/" />      
          <mvc:resources mapping="/js/**" location="/js/" />

四,頁面配置

  1)在head引入文件:    

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="umeditor/third-party/jquery.min.js"></script>
        <script type="text/javascript" src="umeditor/third-party/template.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/umeditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/umeditor.min.js"></script>
        <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

  2)畫出div放置編輯器:        

        <!-- 文本編輯器位置 -->
        <div id="myEditor" style="width:1000px;height:240px;">
          <p>提示內容</p>
        </div>

  3)實例化編輯器:        

        <script type="text/javascript">
          //實例化編輯器
          var um = UM.getEditor(‘myEditor‘);

        </script>

  4)常用方法(其他見官網demo):        

        <input type="button" value="獲取內容" onclick="getAllHtml()">
        <input type="button" value="填充內容" onclick="setAllHtml()">

        <script type="text/javascript">

        //獲取內容
        function getAllHtml() {
        alert(UM.getEditor(‘myEditor‘).getContent())
        }

        //填充內容
        function setAllHtml() {
        alert(UM.getEditor(‘myEditor‘).setContent())
        }

        </script>

五,效果圖

    技術分享圖片  

Editor富文本編輯器配置【不含圖片上傳】