如何使用自定义指令和 ng-ckeditor 更改 Angularjs CKEditor 的 ckeditor 4.24.0 版本

问题描述 投票：0回答：1

我在此链接中找到了带有自定义指令和 ng-ckeditor 的 Angularjs CKEditor 示例，但此示例仅适用于 ckeditor 4.22.1 版本，不适用于 ckeditor 4.24.0。

https://codepen.io/navin_sh/pen/RKQweE

cdn.ckeditor.com/4.22.1/standard/ckeditor.js
ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.js

CKeditor 告诉 ckeditor 4.24.0 之前的旧版本有安全问题，我想使用最新版本。

我应该对此脚本进行哪些更改，以便它可以与版本 4.24.0 一起使用？

javascript angularjs ckeditor
1个回答
0
投票

尝试切换到 

4.9.2
的最新版本 (
ckEditor
)，您可以在 cdnjs 上找到该版本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.9.2/ckeditor.js" integrity="sha512-OF6VwfoBrM/wE3gt0I/lTh1ElROdq3etwAquhEm2YI45Um4ird+0ZFX1IwuBDBRufdXBuYoBb0mqXrmUA2VnOA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Codepen 演示

var app = angular.module("CKEditorExample", ["ngCkeditor"]);
  app.directive('ckEditor', function () {
  return {
    require: '?ngModel',
    link: function (scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);
      if (!ngModel) return;
      ck.on('instanceReady', function () {
        ck.setData(ngModel.$viewValue);
      });
      function updateModel() {
        scope.$apply(function () {
          ngModel.$setViewValue(ck.getData());
        });
      }
      ck.on('change', updateModel);
      ck.on('key', updateModel);
      ck.on('dataReady', updateModel);

      ngModel.$render = function (value) {
        ck.setData(ngModel.$viewValue);
      };
    }
  };
});

app.controller("MainCtrl", ["$scope", function($scope){
  $scope.content = "<p> this is custom directive </p>";
  $scope.content_two = "<p> this is ng-ckeditor directive </p>";
}]);
<html ng-app="CKEditorExample">

  <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.9.2/ckeditor.js" integrity="sha512-OF6VwfoBrM/wE3gt0I/lTh1ElROdq3etwAquhEm2YI45Um4ird+0ZFX1IwuBDBRufdXBuYoBb0mqXrmUA2VnOA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-ckeditor/0.2.1/ng-ckeditor.min.js"></script>
    
    <title>Angular CKEditor Example with custom directive and ng-ckeditor</title>
  </head>

  <body ng-controller="MainCtrl" style="padding:20px">
    <h1>Method 1</h1>
    <textarea ng-model="content" data-ck-editor></textarea>
    
    {{content}}
    
    <hr>
    
    <h1>Method 2</h1>
    <textarea ckeditor="editorOptions" ng-model="content_two"></textarea>
    
    {{content_two}}
  </body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.