发表于： 2017-06-02 17:57:03
2 1270
获得更好的阅读体验，请点这里
因为整这个富文本编辑器弄了很长时间，所以特地做个笔记整理一下
angular中使用UM富文本编辑器
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文件夹下的两个文件都是富文本编辑器所依赖的文件，所以一定要导入，其他的都是样式和配置文件，就不再详细介绍了，想进一步了解的可以直接去官网查阅文档。
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>
返回列表
评论