um富文本编辑器是百度团队开发的一个多功能的富文本编辑器，功能十分强大，但是当我今天想应用到angular中时，却出现了很多问题，踩了不少坑才成功引入，所以特此做个笔记整理一下。
1.准备工作
-
下载umEditor
这里根据后端的语言选择对应的版本，不知道该选哪个就用php的。下载后解压将文件放到项目中。 - 下载
meta.umeditor
因为官网并没有提供angular式的写法，所以我们需要下载一个额外的文件meta.umeditor.js，可以通过bower install meta.umeditor直接下载。这个文件将富文本编辑器封装成了一个指令，这样我们就可以在angular项目中使用它了。
2.引入文件
UM富文本编辑器依赖于jquery，meta.umeditor依赖于angular，所以我们也需要将这两个文件引入，引入的时候需要注意引入顺序，具体顺序如下：
<link rel="stylesheet" href="bower_components/umeditor1.2.3-utf8-php/themes/default/css/umeditor.css">
<script src="bower_components/umeditor1.2.3-utf8-php/third-party/jquery.min.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/third-party/template.min.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/umeditor.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/umeditor.config.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/lang/zh-cn/zh-cn.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/meta.umeditor/src/meta.umeditor.js"></script>
third-party文件夹下的两个文件都是富文本编辑器所依赖的文件，所以一定要导入，但是如果你是用<script>节点调用html指令的话，那么可以不加载template.min.js`这个文件。其他的都是样式和配置文件，就不再详细介绍了，想进一步了解的可以直接去官网查阅文档。
3.使用富文本编辑器指令
在meta.umeditor.js文件里，我们可以看到在第一行有这么一句话
angular.module('meta.umeditor', []).value('metaUmeditorConfig', {...}).directive('metaUmeditor', [...])
从这里我们可以看到这个自定义指令是放在meta.umeditor这个模块里面，所以我们需要在自己的app中注入这个模块：
var app = angular.module('app', ['meta.umeditor']);
接着我们在控制器里面简单的配置一下富文本编辑器：
app.controller('controller', function ($scope) {
$scope.config = {};
$scope.CompleteModel = {
text: '<p>Hello World</p>'
};
});
最后再到html中使用已经封装好的自定义指令调用就可以了
<div type="text/html" style="margin:auto;height:300px;width:100%;"
ng-model="CompleteModel.text"
meta-umeditor
meta-umeditor-config='config'
meta-umeditor-placeholder="请输入内容">
</div>
下面附上完整的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.simple {
position: relative;
margin: 5px;
}
.all {
position: relative;
margin: 5px;
}
.model {
position: absolute;
top: 0px;
right: -210px;
width: 200px;
height: 100%;
border: 1px dashed #ccc;
}
</style>
<link rel="stylesheet" href="bower_components/umeditor1.2.3-utf8-php/themes/default/css/umeditor.css">
<script src="bower_components/umeditor1.2.3-utf8-php/third-party/jquery.min.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/third-party/template.min.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/umeditor.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/umeditor.config.js"></script>
<script src="bower_components/umeditor1.2.3-utf8-php/lang/zh-cn/zh-cn.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/meta.umeditor/src/meta.umeditor.js"></script>
</head>
<body ng-app="app">
<!-- controller -->
<div ng-controller="controller" style="width:800px;margin:auto;">
<!-- simple demo -->
<div class="simple">
<div type="text/html" style="margin:auto;height:300px;width:100%;" ng-model="SimpleModel.text" meta-umeditor
meta-umeditor-placeholder="提示文案!这里是简单的示例">
</div>
<div class="model">
<div ng-bind="SimpleModel.text"></div>
</div>
</div>
<!-- end simple demo -->
<!-- complete demo -->
<div class="all">
<div type="text/html" style="margin:auto;height:300px;width:100%;"
ng-model="CompleteModel.text"
meta-umeditor
meta-umeditor-config='config'
meta-umeditor-placeholder="提示文案!这里是完整的示例">
</div>
<div class="model">
<div ng-bind="CompleteModel.text"></div>
</div>
</div>
<!-- end complete demo -->
</div>
</body>
<script>
var app = angular.module('app', [
'meta.umeditor'
]);
app.controller('controller', function ($scope) {
$scope.config = {};
$scope.CompleteModel = {
text: '<p>Hello World</p>'
};
});
</script>
</html>
使用懒加载的方式加载富文本编辑器
使用懒加载的方式加载的话，是不需要引入这个模块的，但是需要我们配置一下参数，首先我们找到umeditor.config.js这个文件，在大概136行这里有一个配置文件路径的语句。
//为编辑器实例添加一个路径，这个不能被注释
UMEDITOR_HOME_URL : "/vendor/umeditor/"
在这里换上自己的这些umeditor.js文件的外层文件夹路径。配置好后，我们就可以通过懒加载的方式加载富文本编辑器了。
踩过的坑
刚刚同事给我提了个bug，当输入的内容结尾为？或者其他需要使用shift键一起按才能打出来的符号时，这些符号并不会自动同步到model上。花了大量的时间排查后发现输入？等其他标点符号时，不会触发umeditor封装的contentchange事件，解决方案也很简单，可以选择在自定义指令中给umeditor注册一个blur事件，当失焦时同步model即可。具体代码如下：
//监听多个事件
ctrl.initListener = function () {
ctrl.editorInstance.addListener('contentChange', function () {
scope.$evalAsync(ctrl.updateModelView);
});
ctrl.editorInstance.addListener('focus', function () {
scope.$evalAsync(ctrl.updateModelView);
ctrl.focus = true;
ctrl.checkPlaceholder();
});
ctrl.editorInstance.addListener('blur', function () {
scope.$evalAsync(ctrl.updateModelView);
ctrl.focus = false;
ctrl.checkPlaceholder();
// $rootScope.check()
});
};
在meta.umeditor文件里面找到注册事件的代码段，将这段代码插进去就可以了。
网友评论