umeditor的使用教程

1.下载umeditor压缩包

2.放在webContent包下

3.创建index.jsp,引入以下文件

<link href="${ctx }/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${ctx }/umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="${ctx }/umeditor/lang/zh-cn/zh-cn.js"></script>

index.jsp具体内容：

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link href="${ctx }/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${ctx }/umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="${ctx }/umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var um = UM.getEditor('myEditor');
<%--
var um = UM.getEditor('myEditor', {
initialFrameWidth:'70%',
initialFrameHeight:300,
//autoHeightEnabled:false,
toolbar:[
'undo redo | emotion horizontal forecolor backcolor | bold italic underline strikethrough | superscript subscript | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify |',
'link unlink fullscreen'
]
});
--%>

});

</script>
</head>
<body>
<script type="text/plain" id="myEditor" ></script>
</body>
</html>

4.全部显示 var um = UM.getEditor('myEditor'); 显示如下：

5.根据需要显示必要的工具，这样写

var um = UM.getEditor('myEditor', {initialFrameWidth:'70%',initialFrameHeight:300,//autoHeightEnabled:false,
        toolbar:['undo redo | emotion horizontal forecolor backcolor | bold italic underline strikethrough | superscript subscript | removeformat |','insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify |','link unlink fullscreen']});

注意遇到问题：注释使用是显示不了报错的，要使用<%-- --%>注释才能正常显示

转载于:https://www.cnblogs.com/xiaotang5051729/p/10167311.html

umeditor的使用教程相关推荐

.net5项目集成百度富文本编辑器umeditor最全教程（含源码）
目前百度的umeditor已经停止维护了,net版本的分支源码包也停留在了net farmework4左右的版本,对于想要集成这款富文本编辑器到net5平台,具有较大难度,主要体现在以下几个方面: u ...
umeditor+粘贴word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
WordPress编辑器支持Word一键导入
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
umeditor使用教程
近期在研究关于富文本编辑器的东西调研了很多,今天先给大家介绍一下ueditor相关的迷你版umeditor 1.首先建立一个web工程umeditor,然后随意写一个jsp页面作为测试页面,命名为in ...
YII2 百度富文本mini版UMEditor的使用
官方地址:http://ueditor.baidu.com/website/umeditor.html 教程地址:http://fex.baidu.com/ueditor/#start-start 下 ...
yii2 html编辑器,浅析Yii2集成富文本编辑器redactor实例教程
在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Red ...
PHP百度编辑器使用方法,百度UEditor编辑器使用教程与使用方法
标签: 我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟 ...
使用Docker搭建svn服务器教程
使用Docker搭建svn服务器教程 svn简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很 ...
mysql修改校对集_MySQL 教程之校对集问题
本篇文章主要给大家介绍mysql中的校对集问题,希望对需要的朋友有所帮助! 推荐参考教程:<mysql教程> 校对集问题校对集,其实就是数据的比较方式. 校对集,共有三种,分别为:_bi ...

umeditor的使用教程

umeditor的使用教程相关推荐

最新文章

热门文章