umedit html页面配置,Angular中使用UM富文本编辑器

um富文本编辑器是百度团队开发的一个多功能的富文本编辑器，功能十分强大，但是当我今天想应用到angular中时，却出现了很多问题，踩了不少坑才成功引入，所以特此做个笔记整理一下。

1.准备工作

下载umEditor

这里根据后端的语言选择对应的版本，不知道该选哪个就用php的。下载后解压将文件放到项目中。

下载meta.umeditor

因为官网并没有提供angular式的写法，所以我们需要下载一个额外的文件meta.umeditor.js，可以通过bower install meta.umeditor直接下载。这个文件将富文本编辑器封装成了一个指令，这样我们就可以在angular项目中使用它了。

2.引入文件

UM富文本编辑器依赖于jquery，meta.umeditor依赖于angular，所以我们也需要将这两个文件引入，引入的时候需要注意引入顺序，具体顺序如下：

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: '

Hello World

'

};

});

最后再到html中使用已经封装好的自定义指令调用就可以了

ng-model="CompleteModel.text"

meta-umeditor

meta-umeditor-config='config'

meta-umeditor-placeholder="请输入内容">

下面附上完整的html代码：

Title

.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;

}

meta-umeditor-placeholder="提示文案!这里是简单的示例">

ng-model="CompleteModel.text"

meta-umeditor

meta-umeditor-config='config'

meta-umeditor-placeholder="提示文案!这里是完整的示例">

var app = angular.module('app', [

'meta.umeditor'

]);

app.controller('controller', function ($scope) {

$scope.config = {};

$scope.CompleteModel = {

text: '

Hello World

'

};

});