directives.js 5.97 KB
/**
 * Created by Administrator on 2015/2/27.
 */

(function() {
    var xnKindEditor = function ($timeout) {
        alert("hhhhhh");
        return {
            restrict: "AC",
            scope: {
                content: '=ngModel'
            },
            template:"<div>"+
            "<textarea   id=\"{{id}}\"  name=\"kindEdit\"></textarea>"+
            " <div xn-img-box  ng-Model=\"attachmentPopupMuch\"  data-is-open=\"isOpenMuch\" " +
            "   data-type='image' ></div>"+
            "<div xn-img-box-single  data-type='image'   ng-Model=\"attachmentPopup\"  data-is-open-single=\"isOpen\"></div>"+

            "</div>",
            require: "?ngModel",
            link: function (scope, elem,atter,ngModel) {
                if(!atter.url){
                    return ;
                }
                scope.height="500px";
                if(atter.height){
                    scope.height=atter.height;
                }
                scope.isOpen = false;
                scope.isOpenMuch = false;
                //图片预览
                scope.newData={
                    newData:""
                };

                scope.attachmentPopupMuch = {
                    idList: [],
                    attachmentList:[]
                };
                scope.attachmentPopup = {
                    idList: "",
                    attachmentList: ""
                };
                scope.id="editor"+new Date().getTime();

                var editor;
                var hasLoad = false;

                $timeout(function(){
                    editor=KindEditor.create('#'+scope.id,{
                        basePath:atter.url,
                        width:"100%",
                        height:scope.height,
                        resizeType : 1,
                        /* items:[
                         'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                         'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                         'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                         'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                         'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                         'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                         'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                         'anchor', 'link', 'unlink', '|', 'about'
                         ],*/
                        items:[
                            'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
                            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                            'superscript', 'clearhtml', 'quickformat', 'selectall',
                            'formatblock', 'fontname', '|', 'forecolor', 'hilitecolor', 'bold',
                            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|','xn-image', 'xn-multiimage',
                            /*  'insertfile',*/ 'table', 'hr',  'pagebreak',
                            'anchor', 'link', 'unlink'
                        ],

                        afterBlur: function(){
                            getVal(editor.html());
                        }

                    });


                    scope.$watch("content",function(data){
                        if(!hasLoad && data){
                            hasLoad = true;
                            editor.html(data);
                        }
                    });


                    elem.find(".ke-icon-xn-image").on("click",function(){
                        scope.isOpen=true;
                        scope.$apply();
                    });

                    elem.find(".ke-icon-xn-multiimage").on("click",function(){
                        scope.isOpenMuch=true;
                        scope.$apply();
                    });

                },0);



                //监控单选
                scope.$watch(function(){
                    return  scope.isOpen;
                },function(newdata){
                    if(!newdata){
                        if(scope.attachmentPopup.idList){
                            if(editor){
                                editor.insertHtml("<img  src="+scope.attachmentPopup.attachmentList.path+"  alt="+scope.attachmentPopup.attachmentList.fileName+" >");
                            }
                        }else{

                        }
                    }
                });

                //监控多选
                scope.$watch(function(){
                    return  scope.isOpenMuch;
                },function(newdata){
                    if(!newdata){
                        if(scope.attachmentPopupMuch.idList.length>0){
                            var newDome="";
                            for(var i=0;i<scope.attachmentPopupMuch.idList.length;i++){
                                newDome=newDome+"<img src="+scope.attachmentPopupMuch.attachmentList[i].path+"  alt="+scope.attachmentPopupMuch.attachmentList[i].fileName+">"
                            }
                            if(editor){
                                editor.insertHtml(newDome);
                            }
                        }else{

                        }

                    }
                });


                //同步数据
                function getVal(data){
                    hasLoad = true;
                    scope.content=angular.copy(data);
                    scope.$apply();
                }

            }
        };
    };
    angular.module("xn.kindeditor",[])
        .directive('xnKindEditor',["$timeout",xnKindEditor]);
})();