CKEDITOR 5 - 从 ClassicEditor 中删除“插入媒体”选项

Question

我在我的 angular 7 应用程序中使用 CKEditor 5 。 ClassicEditor 默认显示工具栏上的 Insert Media 按钮，如下图突出显示。

在网上研究时，我发现我们可以通过使用 removePlugins editorConfig 禁用特定选项，如下所示。

编辑器.component.ts

  editorConfig = {
    removePlugins: ['Image'],
    placeholder: 'Type the content here!'
      };

上面的代码是不删除 Insert Media 选项，而是 Insert Image 的不同选项。但它不起作用。即使在使用上面的代码之后，我仍然可以在我的 CK 编辑器中看到图像插入选项。

我也无法在网上找到我需要在 removePlugins 中提供的内容，以禁用 Insert Media 选项来尝试是否至少有效。任何帮助将不胜感激。

提前致谢

原文由 RP1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以设置 CKEditor 的默认配置以仅显示我们需要的选项，而不是删除特定按钮。

将以下代码添加到 Angular component.ts 文件中的构造函数将创建一个简单的 CKEditor，其中仅包含 items 数组中提到的那些选项。 mediaEmbed 是负责显示 Insert Video CKEditor 中的选项的名称，我在 items 数组中没有提到它- .

 ClassicEditor.defaultConfig = {
      toolbar: {
        items: [
          'heading',
          '|',
          'bold',
          'italic',
          '|',
          'bulletedList',
          'numberedList',
          '|',
          'insertTable',
          '|',
          'imageUpload',
          '|',
          'undo',
          'redo'
        ]
      },
      image: {
        toolbar: [
          'imageStyle:full',
          'imageStyle:side',
          '|',
          'imageTextAlternative'
        ]
      },
      table: {
        contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
      },
      language: 'en'
    };

添加以上代码后的结果

希望这会帮助别人！

原文由 RP1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这绝对有效

 <script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor

    .create(document.querySelector('#editor'), {
      removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
    })
    .catch( error => {
        console.error( error );
    } );
</script>

原文由 Kwed 发布，翻译遵循 CC BY-SA 4.0 许可协议