Angular部署百度UMEditor富文本编辑器

     最近做的一个angular做前端的项目需要用到富文本编辑器,其实在网页部署富文本编辑器不难,只要按照文档配置就可。但是,部署到angular就有点麻烦。网上关于如何在angular上部署富文本编辑器的教程很少而且讲得很模糊,加上本人刚上手angular,这问题就让我很头疼。

     综合网上各种教程,自己最终成功得在项目中部署了百度的UMEditor富文本编辑器。废话不多说,进入主题。

      1、首先下载百度富文本编辑器(我用得是min版,这个已经基本可以满我的需求了)。下载地址:http://ueditor.baidu.com/website/download.html#mini

          2、解压文件后,文件结构如下:

      

     3、然后构建一个简单angular项目。文件结构如下:
     

      4、把"themes\default\css"的其中一个css(一个是压缩版,一个是非压缩版)文件放到angular项目的css文件夹中

      5、把“themes\default\images”的所有图片复制到angular项目的images文件夹下。

          6、把下图打勾的文件和文件夹一起放到angular项目的js文件夹中。(umeditor.js、umeditor根据需要选择其中一个即可)

     

       7、把相关的文件引入项目中,index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/umeditor.css"/>
</head>
<body ng-app="app">
<div class="all" style="margin-top:30px;" ng-controller="editorCtrl">
    <div type="text/html" style="margin: 0 auto;height:300px;width:1200px;"
         ng-model="CompleteModel.text"
         meta-umeditor
         meta-umeditor-config='config'
         >
    </div>
    <div style="margin-top:50px;">编辑完成后,把内容的html格式保存在数据库。
        <button ng-click="showContent()">把内容的html格式显示在控制台上</button>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/umeditor.js"></script>
<script src="js/umeditor.config.js"></script>
<script src="js/app.js"></script>
<script src="js/directive.js"></script>
</body>
</html>

8、app.js

var app = angular.module('app',[]);

app.controller("editorCtrl",['$scope',function($scope){
    //初始化编辑框内容
    $scope.CompleteModel = {
        text: '<h1>Hello,UMEditor!</h1>'
    };

	//点击按钮,把编辑内容的html格式打印到控制台上
   $scope.showContent = function(){
       console.log($scope.CompleteModel.text);
   };

}])


9、把富文本编辑器的初始化及一些配置封装为指令(这个指令我不记得来自哪里,因为当时查阅了太多内容,全都混淆了,如果原作者看到,如有意见,可以通知我,我会署上转载的地址和原作者的名字,见谅见谅。)。

directive.js

app.value('metaUmeditorConfig', {
    //focus时自动清空初始化时的内容
    autoClearinitialContent: true,
    //关闭字数统计
    wordCount: false,
    //关闭elementPath
    elementPathEnabled: false,
    //frame高度
    initialFrameHeight: 400
})
    .directive('metaUmeditor', ['metaUmeditorConfig', function (metaUmeditorConfig) {
        'use strict';

        return {
            restrict: 'AE',
            scope: {
                scopeConfig: '=metaUmeditorConfig'
            },
            require: 'ngModel',
            transclude: true,
            link: function (scope, element, attrs, ngModel) {

                //获取全局配置,为空
                var config = scope.scopeConfig || metaUmeditorConfig;

                var ctrl = {
                    initialized: false,
                    editorInstance: null,
                    focus: false
                };

                ctrl.init = function () {

                    //创建id
                    if (!attrs.id) {
                        attrs.$set('id', 'metaUmeditor-' + Math.floor(Math.random() * 100).toString() + new Date().getTime().toString());
                    }

                    ctrl.createEditor();

                    //重载ngModel的$render方法
                    ngModel.$render = function () {
                        if (ctrl.initialized) {
                            /**
                             * 重载ngModel的$render方法
                             */
                            ctrl.editorInstance.setContent(ngModel.$viewValue || '');

                        }
                    };

                    //重载ngModel的isEmpty方法
                    ngModel.$isEmpty = function (value) {
                        if (!value) {
                            return true;
                        }
                        if (ctrl.initialized) {
                            return !ctrl.editorInstance.hasContents();
                        }
                    };
                };

                //创建一个UMEditor实例
                ctrl.createEditor = function () {
                    if (!ctrl.initialized) {
                        ctrl.editorInstance = UM.getEditor(attrs['id'], config);
                        ctrl.editorInstance.ready(function () {
                            ctrl.initialized = true;
                            if(ngModel.$viewValue) {
                                ngModel.$render();
                            } else {
                                ctrl.updateModelView;
                            }
                            ctrl.initListener();
                        });
                    }
                };

                //监听多个事件
                ctrl.initListener = function () {
                    ctrl.editorInstance.addListener('contentChange', function () {
                        scope.$evalAsync(ctrl.updateModelView);
                    });
                    ctrl.editorInstance.addListener('focus', function () {
                        ctrl.focus = true;

                    });
                    ctrl.editorInstance.addListener('blur', function () {
                        ctrl.focus = false;

                    });
                };

                //修改ngModel Value
                ctrl.updateModelView = function () {
                    var modelContent = ctrl.editorInstance.getContent();
                    ngModel.$setViewValue(modelContent);
                    if (!scope.$root.$$phase) {
                        scope.$apply();
                    }
                };

                ctrl.init();
            }
        }
    }]);

10、运行的效果,如下图所示:


 11、一般数据库储存编辑器的内容是存储内容的html格式。只要把$scope.CompleteModel.text的值保存到数据库即可。若要编辑之前编辑过的内容,只需要把从数据库读出的数据,赋值到$scope.CompleteModel.text中即可,UMEditor编辑器会把html格式的内容编译显示在编辑器中。

 

12、最后附上完整的代码,可以直接运行:https://pan.baidu.com/s/1i5695yt


本博文纯属作为笔记。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值