Question

我是一个angularJS新手，我需要在我的应用中使用ckeditor作为textarea。

在我尝试使用角度应用程序之前，我只做了一个＆＃34; html＆＃34;网页。我已经生成了我的ckeditor包here并添加了所需的标签（如下所示），它就像一个魅力。

<!DOCTYPE HTML>
<html>
<head>
        <title>CKEditor test page</title>
        <meta charset="utf-8">
</head>
<body>
    <script src='./ckeditor/ckeditor.js'></script>
        <div>
          <form>
              <label>Text input</label>
              <textarea name="text" id='editor1' class="ckeditor"></textarea>
              <input type="submit" method="GET">
          </form>
          <script>
              CKEDITOR.replace('editor1');
          </script>
        </div>
    </body>
</html>

现在我试图将ckeditor用于其中一个视图＆＃34;视图＆＃34;对于我的角度项目，我不能让它工作:( 以下是tpl.html视图的内容：

<script src='./ckeditor/ckeditor.js'></script>

<div class="container">
    <div class="page-header">
        <h2>Title</h2>
    </div>
    <form role="form" class="input_form">
        <accordion>
            <accordion-group heading="Add content" is-open="false">
                <div class="form-group">
                    <label class="control-label">TEXT INPUT</label>
                    <textarea id='test' class="form-control"  rows="3" ng-model="data.body"
                              placeholder="Write your text here!"/></textarea>
                </div>
            </accordion-group>
        </accordion>
        <div class="text-right">
            <a ng-click="submitText()" class="btn btn-primary">Send text</a>
        </div>
    </form>
</div>

让ckeditor使用angularJS应用程序的最基本方法是什么？可以安装这些指令中的任何一个吗？ http://github.com/esvit/ng-ckeditor http://github.com/lemonde/angular-ckeditor

欢迎任何帮助：）

Answer 1

您可以像这样创建自己的指令：

(function () {
    'use strict';

    angular
        .module('app')
        .directive('ckeditor', Directive);

    function Directive($rootScope) {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                var editorOptions;
                if (attr.ckeditor === 'minimal') {
                    // minimal editor
                    editorOptions = {
                        height: 100,
                        toolbar: [
                            { name: 'basic', items: ['Bold', 'Italic', 'Underline'] },
                            { name: 'links', items: ['Link', 'Unlink'] },
                            { name: 'tools', items: ['Maximize'] },
                            { name: 'document', items: ['Source'] },
                        ],
                        removePlugins: 'elementspath',
                        resize_enabled: false
                    };
                } else {
                    // regular editor
                    editorOptions = {
                        filebrowserImageUploadUrl: $rootScope.globals.apiUrl + '/upload',
                        removeButtons: 'About,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Save,CreateDiv,Language,BidiLtr,BidiRtl,Flash,Iframe,addFile,Styles',
                        extraPlugins: 'simpleuploads,imagesfromword'
                    };
                }

                // enable ckeditor
                var ckeditor = element.ckeditor(editorOptions);

                // update ngModel on change
                ckeditor.editor.on('change', function () {
                    ngModel.$setViewValue(this.getData());
                });
            }
        };
    }
})();

并使用它：

<!-- regular wysiwyg editor -->
<textarea ng-model="vm.article.Body" ckeditor></textarea>

<!-- minimal wysiwyg editor -->
<textarea ng-model="vm.article.Body" ckeditor="minimal"></textarea>

Answer 2

我个人喜欢https://github.com/lemonde/angular-ckeditor。实际上，在README.md中记录了步骤1-3，其余的很容易开发......

获取angular-ckeditor：git clone -depth=50 https://github.com/lemonde/angular-ckeditor
通过凉亭下载资源：bower install angular-ckeditor
自己编写一个控制器（请参阅README.md中的示例）
在您的html中链接您的js文件，跟踪订单：

<script type="text/javascript" src="/angular-ckeditor/angular-ckeditor.min.js"></script>
<script type="text/javascript" src="/angular-ckeditor/bower_components/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/yourApp.js"></script>
<script type="text/javascript" src="/yourController.js"></script>

如上所述，使用您的控制器和html中的指令。如果您想使用html中的数据预先初始化编辑器，可以使用以下内容：

data-ng-init="content='this is a text with <a href="http://localhost/whatever.html" target="_blank">an embedded Link</a>'" contenteditable="true" ready="onReady()">

或者在控制器中初始化模型变量（硬编码或通过$http）。

Answer 3

我刚为ckeditor创建了一个角度组件（https://github.com/jziggas/ng-ck），您可以尝试使用它。它与Angular 1.6和CKEditor 4.6兼容。一旦安装了ckeditor库本身，使用该组件就像<ng-ck ng-model="content"></ng-ck>一样简单。文档中还有回调可以直接进入ckeditor的事件。

如何在角度JS应用程序中使用ckeditor？

3 个答案: