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

lov*_*ing 7 html ckeditor angularjs

我是一个angularJS新手,我需要在我的应用程序中使用ckeditor作为textarea.

在我在角度应用程序上尝试之前,我已经完成了一个"仅限html"的网页.我在这里生成了我的ckeditor包并添加了所需的标签(如下所示),它就像一个魅力.

<!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>
Run Code Online (Sandbox Code Playgroud)

现在我正在尝试将ckeditor用于我的角度项目的一个tpl"视图"的单个文本区域,我无法使其工作:(这是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>
Run Code Online (Sandbox Code Playgroud)

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

欢迎任何帮助:)

mik*_*ika 0

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

  1. 获取角度ckeditor:git clone -depth=50 https://github.com/lemonde/angular-ckeditor
  2. 通过 Bower 下载资源:bower install angular-ckeditor
  3. 自己编写一个控制器(请参阅 README.md 中的示例)
  4. 在 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>
Run Code Online (Sandbox Code Playgroud)
  1. 按照描述使用您的控制器和 html 中的指令。如果您想使用 html 中的数据预初始化编辑器,您可以使用如下内容:

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

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