zoukankan      html  css  js  c++  java
  • AngularJS+ckEditor管理ng-model

    1、首先去ckeditor的官网下载ckeditor包,http://ckeditor.com/download;

    2、把ckeditor文件夹放入工程中(webapp文件夹下能访问到的都行)。

    3、页面导入ckeditor.js,就导入这个文件即可。

    4、使用Angular的directive配置ckeditor编辑器

    /**ckEditor,因为这里定义了,所以在页面就无需定义一个新的ckeditor了,注意看浏览器控制台,
    *如果页面用ckeditor官方的方法定义一个ckeditor,就会出错,说重复定义一个ckeditor*/
    app.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);
    };
    }
    };
    });

    5、然后在页面写上,即可进行双向绑定!!(切记到这里就行了,不要画蛇添足在途写其他的,不然会报错的!)

    <textarea ckeditor ng-model="topic.content" class="form-control" name="content"></textarea>

    说明:如果没用到AngularJS,不需要进行ng-model的双向绑定的话 。就不用写Angular的directive指令就去掉第四和第五步,其他不变加上下面的即可

    <textarea ckeditor ng-model="topic.content" class="form-control" name="content"></textarea>

    <!--经自己的测试,这段js代码一定要放到此<textarea>标签之后-->

    <script type="text/javascript">
    CKEDITOR.replace('content'); //参数‘content’是textarea元素的name属性值,而非id属性值
    </script>

  • 相关阅读:
    JAVA相关基础的知识吧
    Java测试调用.net 接口服务
    Java测试内存信息
    Java测试普通Java接口记录-TestHrmInterface
    那些年学不会的操作(写法/...)——记录一些靠搜索做过但总是记不住的东西
    正确的sybase批量插入语法
    新ZJJG项目相关接口开发记录-微信制证组成浅析
    bip项目的启用/调试+ 问题记录
    记录数组问题
    模糊匹配的查询条件/ 给下拉框加提示呢
  • 原文地址:https://www.cnblogs.com/zml-java/p/5317783.html
Copyright © 2011-2022 走看看