Angularjs 与Ckeditor
Angularjs 与Ckeditor
Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化(Module机制
)、自动化双向数据绑定、语义化标签(Directive
)、依赖注入、路由(Route)机制、服务(services)机制等等。以前也用过Jquery、Extjs等,现在刚开始接触AngularJS,感觉这是一个很吸引人的一个框架。
学习网址:
- http://www.angularjs.org
- http://www.angularjs.cn/tag/AngularJS AngularJS 中文社区
- http://www.360doc.com/content/13/0729/13/13328522_303333441.shtml AngularJS 学习笔记
我们在做B/S系统是经常会用到在线编辑器(FreeTextBox,Ckeditor,KindEditor等等),我比较常用的是kindEditor和ckEditor。
开始打算用kindEditor,

- mainApp.directive('kindeditor', function() {
- return {
- require : '?ngModel',
- link : function(scope, element, attrs, ngModel) {
- var editor;
- KindEditor.ready(function(K) {
- editor = K.create(element[0], {
- resizeType : 1,
- allowPreviewEmoticons : false,
- allowImageUpload : false,
- items : [
- 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
- 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
- 'insertunorderedlist', '|', 'emoticons', 'image', 'link']
- });
- });
- if (!ngModel) {
- return;
- }
- editor.on('instanceReady', function() {
- editor.setData(ngModel.$viewValue);
- });
- editor.on('pasteState', function() {
- scope.$apply(function() {
- ngModel.$setViewValue(editor.getData());
- });
- });
- ngModel.$render = function(value) {
- editor.setData(ngModel.$viewValue);
- };
- }
- };
- });

不过没有成功,原因使Editor 需要在KindEditor.ready中初始化,后面的editor为undefined,所以edito.on()等无法运行,这个地方可能会有其他方法,但是我暂时没有找到方法,如果有朋友找到,可以交流下。
然后有使用了ckeditor写了一个指令

- /**
- * ckeditor Directive
- * @author 张世民 @ 数云图
- */
- mainApp.directive('ckeditor', function() {
- return {
- require : '?ngModel',
- link : function(scope, element, attrs, ngModel) {
- var ckeditor = CKEDITOR.replace(element[0], {
- });
- if (!ngModel) {
- return;
- }
- ckeditor.on('pasteState', function() {
- scope.$apply(function() {
- ngModel.$setViewValue(ckeditor.getData());
- });
- });
- ngModel.$render = function(value) {
- ckeditor.setData(ngModel.$viewValue);
- };
- }
- };
- });

这样可以成功使用了。
但是在编辑时又发现问题了,在第二次编辑时没有执行
1
|
ckeditor.setData(ngModel.$viewValue); |
又给ckeditor绑定了instanceReady事件,这样用起来比较完美了,最后ckeditor指令如下

- /**
- * ckeditor Directive
- * @author 张世民 @ 数云图
- */
- mainApp.directive('ckeditor', function() {
- return {
- require : '?ngModel',
- link : function(scope, element, attrs, ngModel) {
- var ckeditor = CKEDITOR.replace(element[0], {
- });
- if (!ngModel) {
- return;
- }
- ckeditor.on('instanceReady', function() {
- ckeditor.setData(ngModel.$viewValue);
- });
- ckeditor.on('pasteState', function() {
- scope.$apply(function() {
- ngModel.$setViewValue(ckeditor.getData());
- });
- });
- ngModel.$render = function(value) {
- ckeditor.setData(ngModel.$viewValue);
- };
- }
- };
- });

用法简单,只需要在html标签上加入ckeditor 指令
- <textarea ckeditor ng-model="entity.catalog" class="form-control"></textarea>
补充:
几位朋友说Ueditor挺好用的,测试了一下,写了一个AngularJs的Ueditor指令

- mainApp.directive('ueditor', function() {
- return {
- require : '?ngModel',
- link : function(scope, element, attrs, ngModel) {
- var ueditor = UE.getEditor(element[0], {
- //配置
- });
- if (!ngModel) {
- return;
- }
- ueditor.on('instanceReady', function() {
- ueditor.setContent(ngModel.$viewValue);
- });
- ueditor.on('pasteState', function() {
- scope.$apply(function() {
- ngModel.$setViewValue(ueditor.getContent());
- });
- });
- ngModel.$render = function(value) {
- ueditor.setContent(ngModel.$viewValue);
- };
- }
- };
- });

用法只需在Html标签上加上ueditor指令
- <textarea ueditor ng-model="entity.catalog" class="form-control"></textarea>
Angularjs 与Ckeditor的更多相关文章
- angularjs中ckeditor的destroy问题
项目中,在切换了页面的tab页后会发现上传图片的操作报错,检查后发现问题根源是切换了tab页重新加载页面时ckeditor又会创建一次,这个时候的ckeditor已经不是第一次创建的那个了,所以上传图 ...
- AngularJS+ckEditor管理ng-model
1.首先去ckeditor的官网下载ckeditor包,http://ckeditor.com/download: 2.把ckeditor文件夹放入工程中(webapp文件夹下能访问到的都行). 3. ...
- ckeditor+angularjs directive
var cmsPlus = angular.module('cmsPlus', []); cmsPlus.directive('ckEditor', function() { return { req ...
- Angularjs中添加ckEditor插件
使用方法看注释.主要解决帮上ngModel的问题 angular.module('newApp') .directive('ckeEditor', function() { return { /* F ...
- angular+ckeditor最后上传的最后一张图片不会被添加(bug)
做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model=& ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
随机推荐
- HTML基金会2----联系,像, 第,对齐
ios讨论组1团:135718460 在web开发中.排版,布局非常重要,因此我们要把基础的东西打坚固,大家不要 慌,慢慢来. 直接把代码拿过去,直接就能够执行的. 1.标题 2.段落 3.HTML ...
- (大数据工程师学习路径)第一步 Linux 基础入门----目录结构及文件基本操作
Linux 目录结构及文件基本操作 介绍 1.Linux 的文件组织目录结构. 2.相对路径和绝对路径. 3.对文件的移动.复制.重命名.编辑等操作. 一.Linux 目录结构 在讲 Linux 目录 ...
- 详细解释VB连接access几种方法数据库
在VB中,连接ACCESS数据库的方法主要有以下三种 使用ADO对象,通过编写代码訪问数据库 Connection 对象 ODBC数据源 使用ADO Data 控件高速创建数据库连接 有三种连接方法 ...
- 什么是WEBserver? 经常使用的WEBserver有哪些?
什么是WEBserver? 经常使用的WEBserver有哪些? 一.什么是WEBserver Webserver能够解析HTTP协议.当Webserver接收到一个HTTP请求,会返回一个HTTP响 ...
- poj2431 Expedition
直接代码... #include<string.h> #include<stdio.h> #include<queue> #include<iostream& ...
- 设置韩澳大利亚sinox弄winxp清除字体和界面美观
澳大利亚开始与汉sinox一直以为接口暗淡,字体比较模糊,否winxp光明,导致眼比较辛苦的眼睛.比方说,可能不那么黯淡刺眼,有益眼睛,但我不能忍受字体模糊.即使调整分辨率,,但是字体模糊还是没有改观 ...
- MVC 编程模型及其变种
MVC 编程模型及其变种 MVC全称是Model View Controller, 这是一个模型(model)-查看(view)-调节器(controller)缩写,这是通过通用的编程模型非.MVC当 ...
- 删除句子UITableView额外的底线和切割线
于viewDidLoad添加代码功能句子: self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 它可 ...
- Spring搭建MVC WEB项目[转]
原文链接:http://blog.csdn.net/initphp/article/details/8208349 1.创建一个web项目 2.假设,我们已经安装完毕Spring所需要的依赖包,以及一 ...
- LinkedBlockingQueue多线程测试
public class FillQueueThread extends Thread { private Queue queue; public FillQueueThread(Queue queu ...