发表于: 2017-10-26 21:34:54

1 661


今天完成的事情:

1.完成了任务十表单验证部分

2.完成了引入富文本编辑器部分

明天计划的事情:

1.学习一下UEditor的文档,获取输入内容

2.修改完成任务十

遇到的问题:

暂无

收获:

UEditor富文本编辑器是百度团队开发的一个多功能的富文本编辑器,功能十分强大

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>

参考:http://blog.csdn.net/pkpk20044/article/details/52215152


返回列表 返回列表
评论

    分享到