CKEDITOR 5 - 从 ClassicEditor 中删除 "Insert Media" 选项

Question

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

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

editor.component.ts

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

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

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

提前致谢

Answer 1

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

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

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'
    };

添加以上代码后的结果

希望这对某人有所帮助！

Answer 2

尝试在输入中传递配置。

Answer 3

第一种解决方法

转到节点模块 -> @ckeditor -> ckeditor-build-classic -> 构建 ->ckeditor.js 前往或搜索 ckeditor.js 中的 defaultConfig --- 你会在最后几行中找到

此处删除不需要的字段，如 table、媒体等

第二种解法

defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","insertTable","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},language:"en"}}]).default}

完整列表如下：

例如 - 从编辑器中删除 table

defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

放入component.ts文件的构造函数

ClassicEditor.defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

Answer 4

我认为您的方向是正确的。我能够通过使用 removePlugins 配置选项来完成此操作。关键是确保您的 removePlugins 数组中的项目与默认工具栏配置中的项目名称相匹配。

const defaultToolbarItems = [
  ...,
  'imageUpload',
  'mediaEmbed',
  ...
];

const editorConfig = {
  placeholder: 'Type the content here!',
  removePlugins: ['imageUpload','mediaEmbed'],
}

Answer 5

这很不直观，我知道。

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

您可以获得这样的 list of all plugins：

console.log(ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName));

Answer 6

这绝对有效

<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>

CKEDITOR 5 - 从 ClassicEditor 中删除 "Insert Media" 选项

CKEDITOR 5 - Remove "Insert Media" option from ClassicEditor

html

ckeditor

angular7

ckeditor5