分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Editor富文本编辑器配置【不含图片上传】

发布时间:2023-09-06 01:25责任编辑:赖小花关键词:配置

一,下载地址: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富文本编辑器配置【不含图片上传】

原文地址:http://www.cnblogs.com/hi-feng/p/7862684.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved