Angular1.X 到Angular2.0 指令迁移(富文本编辑器)

继续angular1.x到2.0指令的转变 1.x的富文本编辑器的指令(wangEditor)

/**
 * 富文本编辑器指令。
 * 使用:<textarea ng-model="dataObj.content" ng-keditor  ></textarea>
 * 前端config可以覆盖指令的 items,根据自己需求去修改item,默认的话是以下几项
 *
 * 这个指令配置的uploadJson的接口一定要返回{error:"",message:{url:""},code:0}
 * code =0表示成功
 */


angular.module('mamApp').directive('ngKeditor', ["$parse", "api", function ($parse, api) {  
    var linkFn = function (scope, elm, attr, ctrl) {
        if (typeof wangEditor === 'undefined') {
            console.error('Please import the local resources of kindeditor!');
            return;
        }
        var userInfo = JSON.parse(localStorage.getItem("userInfo"));
//这里这么写是因为我的上传图片需要用户的token


        var editorId = elm[0],
            editorConfig = scope.config || {};

        editorConfig.afterChange = function () {
            if (!scope.$$phase) {
                ctrl.$setViewValue(this.html());
                // exception happens here when angular is 1.2.28
                // scope.$apply();
            }
        };
        if (wangEditor) {
            var editor1 = new wangEditor(editorId);
            editor1.config.uploadImgUrl = api + "/admin/notices/uploadImage";
            editor1.config.uploadHeaders = {'X-Auth-Token': userInfo.token};
            editor1.config.uploadImgFileName = "uploadFile";
            editor1.config.printLog = false;
            editor1.config.emotions = {
                default: {
                    title: '默认表情',  // 组名称
                    data: 'init/emotions.data' // 服务器的一个json文件url,例如官网这里配置的是 http://www.wangeditor.com/wangEditor/test/emotions.data
                }
            }

            editor1.config.uploadImgFns.onload = function (resultText, xhr) {
                var urlObj = JSON.parse(JSON.parse(resultText));
                // resultText 服务器端返回的text
                // xhr 是 xmlHttpRequest 对象,IE8、9中不支持

                // 上传图片时,已经将图片的名字存在 editor.uploadImgOriginalName
                var originalName = editor1.uploadImgOriginalName || '';

                // 如果 resultText 是图片的url地址,可以这样插入图片:
                editor1.command(null, 'insertHtml', '<img src="' + urlObj.url + '" alt="' + originalName + '" style="max-width:100%;"/>');
                // 如果不想要 img 的 max-width 样式,也可以这样插入:
                // editor.command(null, 'InsertImage', resultText);
            };
            editor1.create();
        }

        ctrl.$parsers.push(function (viewValue) {
            ctrl.$setValidity('keditor', viewValue);
            return viewValue;
        });

        ctrl.$render = function () {
            var _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
            editor1.$txt.html(_initContent);
        };

        editor1.onchange = function () {
            // 编辑区域内容变化时,实时打印出当前内容
            ctrl.$setViewValue(editor1.$txt.html());
        };


    };

    return {
        require: 'ngModel',
        scope: {config: '=config', ngModel: '=ngModel'},
        link: linkFn
    };
}]);

2.0应该叫通用模版

import {Component, Input, Output, ElementRef,EventEmitter} from '@angular/core';  
import {url} from '../shared';  
declare var $:any;  
var $ = require('jquery');  
var wangEditor = require('wangeditor');  
@Component({
    selector: 'kt-editor',
    template: '<textarea style="min-height: 500px">\n    \n</textarea>'

})
export class KtEditorDirective {  
    selectTime:any="";
    editorInput:any;



    @Output() htmlTextChange = new EventEmitter<string>();

    constructor(private input: ElementRef) {

    }



    ngAfterViewInit() {
        let _this=this;
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.editorInput=$(this.input.nativeElement).find('textarea:first');
        let editor1 = new wangEditor(this.editorInput);

        editor1.config.uploadImgUrl = url + "/admin/notices/uploadImage";
        editor1.config.uploadHeaders = {'X-Auth-Token': userInfo.token};
        editor1.config.uploadImgFileName = "uploadFile";
        editor1.config.printLog = false;


        editor1.config.uploadImgFns.onload = function (resultText, xhr) {
            var urlObj = JSON.parse(JSON.parse(resultText));
            // resultText 服务器端返回的text
            // xhr 是 xmlHttpRequest 对象,IE8、9中不支持

            // 上传图片时,已经将图片的名字存在 editor.uploadImgOriginalName
            var originalName = editor1.uploadImgOriginalName || '';

            // 如果 resultText 是图片的url地址,可以这样插入图片:
            editor1.command(null, 'insertHtml', '<img src="' + urlObj.url + '" alt="' + originalName + '" style="max-width:100%;"/>');
            // 如果不想要 img 的 max-width 样式,也可以这样插入:
            // editor.command(null, 'InsertImage', resultText);
        };
        editor1.create();
        editor1.onchange = function () {
            let htmlText=editor1.$txt.html();
            _this.htmlTextChange.emit(htmlText);
        };


    }


}
这里面需要输出这个组件的输入值,所以用到了EventEmitter,这个不清楚可以看api

 <kt-editor   (htmlTextChange)="formData.content=$event"></kt-editor>
页面的用法,其中的formData.content=$event就是把公共组件的值赋值给你的model

李文杰

前端程序设计,人丑、家穷、没文化 myGit: https://github.com/JosnLee

北京市朝阳区成寿寺