ueditor笔记

一、ueditor是什么

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

二、ueditor的下载

下载网址：https://ueditor.baidu.com/website/download.html#ueditor

下载版本：jsp版，当然也可以下载源码版，后面和springmvc整合的时候需要下载源码版。

下载完后的zip包

三、将ueditor集成到javaweb(servlet)项目

l 第一步：新建一个javaweb项目，并把ueditor引入到项目中。…min.js都是压缩版，不推荐使用，压缩版不方便改源码

l 第二步：在index.jsp中引用ueditor

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script>

<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

</head>

<body>

	<div id="editor" style="width:1024px;height:500px;"></div>

</body>

<script type="text/javascript">

    //实例化编辑器

    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    var ue = UE.getEditor('editor');

</script>

</html>

l 第三步：通过浏览器访问index.jsp，测试是否集成成功: http://localhost:8080/ueditor01/index.jsp

四、常用API

l 第一步：在项目中新建一个api.jsp

l 第二步：api.jsp的内容如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%  String path = request.getContextPath();

	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

			+ path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>ueditor常用api</title>

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"></script>

<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

<script type="text/javascript" charset="utf-8"src="ueditor/lang/zh-cn/zh-cn.js"></script>

</head>

<body>

	<div id="editor" style="width:1024px;height:500px;"></div>

	<button onclick="getAllHtml();">1.获得整个html的内容</button>

	<button onclick="getContent()">2.获得编辑区域输入的内容(html)</button>

	<button onclick="setContent(false,'<h1>1111</h1>')">3.写入内容到编辑区(html格式)</button>

	<button onclick="setContent(true,'<h1>2222</h1>')">4.追加内容到编辑区(html格式)</button>

</body>

<script type="text/javascript">

	//实例化编辑器

	//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

	var ue = UE.getEditor('editor');

	//获得整个页面的html

	function getAllHtml() {

		alert(UE.getEditor('editor').getAllHtml());

	}

	//获得编辑区域输入的内容(html)

	function getContent() {

		var arr = [];

		arr.push(UE.getEditor('editor').getContent());

		alert(arr.join("\n"));

	}

	/*

	写入内容到编辑区(html格式)

	param1：isAppendTo:是否追加

	param2：content：内容

	 */

	function setContent(isAppendTo, content) {

		var arr = [];

		UE.getEditor('editor').setContent(content, isAppendTo);

		alert("写入内容：" + content + arr.join("\n"));

	}

</script>

</html>

l 其它api参考ueditor中的index.html

五、servlet项目中ueditor上传配置

上传的配置都差不多，主要就是修改config.json这个配置文件，这里以图片上传为例。当然这里的项目是servlet项目。如果是springmvc或者strus2这种项目，就和这里不一样了。

5.1 servlet项目中配置图片上传

如果没有配置，图片的不能上传的默认是这个样子

l 第一步：把ueditor的jar包复制到lib下

l 第二步：建立图片上传的保存目录

l 第三步：修改config.json配置

例如：我这里上传后的图片将保存到：D:tomcat7/webapps/ueditor02/upload/image/ 下面

l 第四步：测试是否配置成功，点击多图上传，出现下面这个画面，说明配置成功。

5.2 servlet项目中配置其它上传

其它上传如：视频上传等等参考5.1图片上传，修改即可。

六、springmvc项目中ueditor上传配置

参考这个 https://blog.csdn.net/github_38823514/article/details/75288505

ueditor笔记的更多相关文章

Typecho集成ueditor笔记
前言:萝卜青菜各有所爱,因为个人需求所以需要在博客中集成ueditor,并非是我不喜欢md语法其实本篇的笔记的书写最早也是在本地的md编辑器上完成的 1. 首先下载ueditor编辑器,然后重命名文 ...
Net 使用UEditor笔记
WebForm使用Ueditor获取编辑器的值有两种方法:1.通过前台js 获取 function test() { alert(UE.getEditor('控件Id').getContent()); ...
在为知笔记中使用Markdown和思维导图
为知笔记Wiz是一款很好的网摘和笔记工具,作为为知的忠实用户,我在为知收费后第一时间就购买了两年的授权,毕竟这么多年积累的资料都在为知上,我也习惯了使用Wiz来做些工作相关的笔记.为知笔记自带Mark ...
MVC OF UEditor 图片上传- 额外参数笔记
最近正巧需要用到UEditor ,因为需求,.需要把上传的图片数据上传到阿里云的OSS与记录图片相关信息到MS SQL中 . 不得已只能翻UEditor的实现代码>_<痛苦. 备忘笔记: ...
springmvc学习笔记--ueditor和springmvc的集成
前言: 在web开发中, 富文本的编辑器真心很重要. 有电商店铺的打理, 新闻稿/博客文章/论坛帖子的编辑等等, 这种所见即所的编辑方式, 大大方便了非技术人员从事互利网相关的工作. 因为手头有个小项 ...
nodejs学习笔记三——nodejs使用富文本插件ueditor
在做自己的nodejs项目的时候遇到需要使用ueditor.原来下载的是ueditor的jsp版本.目录如下在ueditor.config.js中有配置服务器home路径(这个home路径能找到u ...
使用ueditor中的setContent() 时经常报innerHtml错误（笔记）
1)今天遇到个问题,使用ueditor中的setContent() 时经常报innerHtml错误:网上找了下解决方案:发现这个可以用: 不能创建editor之后马上使用ueditor.setCont ...
[moka同学笔记]百度编辑器Ueditor自动换行，添加<p>的问题（摘录）
原文:http://www.cnblogs.com/kissdodog/p/5419919.html 百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的 ...
百科编辑器ueditor应用笔记
最近项目上要用到文本编辑器,选了百科开源的ueditor,使用过程中虽然有些问题,但是一个个都解决了,记录如下: 开发的项目环境是vs2012:.net4.0: 1:百度js编辑器,编辑器加载到项目中 ...

随机推荐

oracle 创建的表为什么在table里没有,但是可以查出来
有两种的可能: 1这个表在其他用户下创建的,当前用户没有权限访问,此表不在属于当前用户 2查询时写的表名,并不是真正意义的表名,可能指向其他用户,或者就不是这个表
原生js实现删除class和添加class
内容来自百度搜索 //判断样式是否存在 function hasClass(ele, cls) { return ele.className.match(new RegExp("(\ ...
FluentDataflow - Fluent Style TPL Dataflow
我的新英文博客文章: FluentDataflow - Fluent Style TPL Dataflow 介绍了本人最新发布的一个开源类库:FluentDataflow--Fluent风格的TPL ...
Linux安装Gradle
Linux安装Gradle Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具.在github上,gradle项目很多,有的是gra ...
在vue中使用setter改写父子组件传的值
概述最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...
[Swift]LeetCode874. 模拟行走机器人 | Walking Robot Simulation
A robot on an infinite grid starts at point (0, 0) and faces north. The robot can receive one of th ...
iOS模拟器使用
在iOS开发过程中一直都是使用模拟器进行调试,在模拟器上有很多不适应的地方,但是其实在模拟器上也有很多其他的功能,在本文中主要对模拟器的一些基本功能进行总结一下. 1 首先,我们了解一下模拟器中常用的 ...
VMware虚拟机安装Linux系统
许多新手连 Windows 的安装都不太熟悉,更别提 Linux 的安装了:即使安装成功了,也有可能破坏现有的 Windows 系统,比如导致硬盘数据丢失.Windows 无法开机等.所以一直以来,安 ...
RSA算法原理——（1）目前常见加密算法简介
艾伦·麦席森·图灵在二战期间主要负责破译德国人的密码系统Enigma,破解密码需要大量的计算,图灵深知工欲善其事必先利其器的道理,于是一台叫作CO-LOSSUS的计算机在1943年被研制出来,后来 ...
[Abp 源码分析]十一、权限验证
0.简介 Abp 本身集成了一套权限验证体系,通过 ASP.NET Core 的过滤器与 Castle 的拦截器进行拦截请求,并进行权限验证.在 Abp 框架内部,权限分为两块,一个是功能(Featu ...