Angular 添加指令directive引入ckeditor

/**
 * CKEditor富文本编辑器引入
 * https://blog.csdn.net/wuhouchao/article/details/97645662
 * https://blog.csdn.net/bing_bg/article/details/104811426
**/
.directive('muiCkeditor', function() {
	return {
		require:'ngModel',
		restrict : 'A',
		scope: {params: "="},
		link:function (scope, elements, attrs, ctrl) {
			var editor;
	        var CKEditor = {
	            initEditor: function () {
	            	editor = CKEDITOR.replace(elements[0],{
                    	 toolbar: 'Basic',
                    	 //图片上传的api url
                    	 filebrowserImageUploadUrl : "form/upload"
                  });
	            	//监听editor,实例生成后将model绑定的值赋值给编辑器文本框中(页面一开始加载的时候)
	            	editor.on('instanceReady', function() {
	            		 editor.setData(ctrl.$viewValue);
	        	        });
	            	//监听editor,每次文本框的值改变就会执行
        	        editor.on('pasteState', function() {
        	            scope.$apply(function() {
        	            	ctrl.$setViewValue(editor.getData());
        	          });
        	        });
	            },
	        }
	        ctrl.$render = function(value) {
	        	editor.setData(ctrl.$viewValue);
	        }
	        CKEditor.initEditor(); 
		}
	};
})

页面标签展示

<textarea mui-ckeditor ng-model="bean.content"></textarea >

效果