[JS] 使用RequireJS引用UMeditor

时间:2022-12-31 19:46:14

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许*使用和修改代码.

而UMeditor则是UEditor删减版.

本文将通过RequireJS的方式来加载UMeditor.

效果图:

[JS] 使用RequireJS引用UMeditor

普通方式:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Scripts/umeditor/themes/default/css/umeditor.css" rel="stylesheet" />
</head>
<body>
<script type="text/plain" id="myEditor" style="width:500px;height:240px;">
<p>Hello World</p>
</script>
<script src="Scripts/umeditor/third-party/jquery.min.js"></script>
<script src="Scripts/umeditor/umeditor.config.js"></script>
<script src="Scripts/umeditor/umeditor.min.js"></script>
<script src="Scripts/umeditor/lang/zh-cn/zh-cn.js"></script>
<script>
var um = UM.getEditor('myEditor');
</script>
</body>
</html>

RequireJS:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="scripts/require.js" data-main="scripts/main" defer async="true"></script>
</head>
<body>
<script type="text/plain" id="myEditor" style="width:500px;height:240px;">
<p>Hello World</p>
</script>
</body>
</html>

来看看我们的main.js

require.config({
baseUrl: 'scripts/umeditor/',
paths: {
'jquery': 'third-party/jquery.min',
'um.zh': 'lang/zh-cn/zh-cn',
'um': 'umeditor'
},
shim: {
um: ['umeditor.config', 'jquery'],
'um.zh': ['um']
}
}); require(['../css!themes/default/css/umeditor.css', 'um.zh'], function () {
var um = UM.getEditor('myEditor');
});

从html代码来看RequireJS简洁的多.

再来比较一下加载速度吧

普通:

[JS] 使用RequireJS引用UMeditor

RequireJS:

[JS] 使用RequireJS引用UMeditor

明显Require的DOM加载速度非常快.

UMeditor一些踩坑点:

  • 在config.js中需要配置HOME_URL,用来解决依赖js路径问题.

[JS] 使用RequireJS引用UMeditor

  • 在config.js中需要根据项目配置上传地址

[JS] 使用RequireJS引用UMeditor

  • 在UMeditor Doc中介绍editor.setContent()为写入内容.而这段代码一定需要放到ready函数中
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容,返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容,返回: hello
var txt = ue.getContentTxt();
});
  • 在上传图片的时候,需要返回特定的json格式.但返回的Content-Type不可以为application/json.

本例中,同时使用了RequireJS.css插件实现css的加载.

为方便大家,同时在Nuget上上传了Nuget包.

Install-Package umeditor