时间戳

首页 > 解决方案 > 如何将插件添加到 CKEditor 5？

html - 如何将插件添加到 CKEditor 5？

问题描述

我正在学习如何使用 CKEditor 5 以及如何向编辑器添加插件。我一直在尝试按照 CKEditor 生态系统文档中提供的说明进行操作，但是在集成 Word Count Plugin时出现错误

我已将GitHub 上的插件下载到本地的 plugins 文件夹中。

 CKEditor 
 |---ckeditor.js
 |---ckeditor.js.map
 |---translations (folder)
 |---plugins(folder) 
     |---ckeditor5-word-count (folder)
         |---src (folder)
             |---wordcount.js

我不知道如何在本地从 CKEditor 5 本身安装此插件而无需从 Internet 下载它（使用 npm 存储库中的 npm install）。我很清楚我做错了什么，但我无法确定它是什么。

如果有人能给我提示、替代方案，当然还有解决方案，我将不胜感激。我已经尝试了几天了，我不知道我能做什么，不能做什么。如果有人可以帮助我，我将不胜感激。

$(function() {   
    var editorTextarea
    ClassicEditor.create( document.querySelector( '#cktext' ),{
            
        } )
        .then (editor => {
            editorTextarea = editor;                            
        })
        .catch( error => {
            console.error( error );
        } );
    
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>

<form class="test-form-horizontal" id="testform" role="form" >
  <div class="row">
   <div class="col-sm-12">
     <label for="ckname">Name*:</label> 
     <input name="ckname" class="form-control" id="ckname" />
   </div>
   <div class="col-sm-12"><p>&nbsp;</p></div>

   <div class="col-sm-12">
     <label for="cktext">CkEditor*:</label> 
     <textarea class="form-control ckeditor" name="cktext" id="cktext"></textarea>
   </div>

   <div class="col-sm-12"><p>&nbsp;</p></div>
   </div>
  <button type="submit" class="btn btn-default btn-success">Submit</button>
  </form>

标签： htmljqueryckeditorckeditor5

解决方案

CKEditor 的设计方式意味着您不能仅通过更改网页中的 HTML 来更改编辑器中显示的插件。

您需要有一个“构建”（Javascript 文件的集合），其中包含您需要的所有插件，然后您可以通过调整 HTML 来调整该构建的哪些部分出现在您的 Web 编辑器中。

默认方式 - 构建

CKEditor5 有五个即用型构建。每个都是不同类型的编辑器（经典、弹出等）。他们为每个人选择了他们认为大多数人会觉得有用的插件。我猜你使用了上面的这些版本之一。

有关如何使用其构建的文档 - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html

漫长的道路 - 框架

要创建您自己的自定义构建，您需要使用 Node.js 并了解 CKEditor5“框架”的工作原理。通常你从 GitHub 上 fork 一个现有的构建，调整配置以添加更多插件，然后构建它。

这是概述https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

有很多关于使用框架的文档 - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html

快捷方式 - Online Builder

幸运的是，他们有一个中间选项。您可以在他们的网站上选择您的插件选项，它会自动为您构建它并为您提供 ZIP 下载文件 - https://ckeditor.com/ckeditor-5/online-builder/

我尝试构建一个包含 Word Count 插件的编辑器。看起来代码在构建中，但您需要编写一些 HTML/Javascript 来访问它（如插件文档中所述 - https://ckeditor.com/docs/ckeditor5/latest/features/word-count .html )

注意：我建议删除CKFinder CKFinder Upload Adapter和Cloud Services插件，因为它们需要云订阅，这意味着您不能立即下载 ZIP 文件。

为什么这么复杂？

他们的重点是建立一个非常灵活的系统，缺点是它变得相当复杂。他们在 2017 年（接近尾声）发布 v5 时谈到了他们的方法 - https://ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/

推荐阅读