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

Posted 2020-10-15 言_曦

一，下载地址：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>

五，效果图