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

Question

我在我的angular 7应用程序中使用CKEditor 5。默认情况下，ClassicEditor在工具栏上显示“插入媒体”按钮，如下图所示。请注意保留HTML标签。

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

editor.component.ts

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

以上代码是用来不删除插入媒体选项而是另一种插入图像选项。但它不起作用。即使使用了上面的代码，我仍然可以看到我的CK Editor中的图像插入选项。

我也找不到在线资料来了解如何在removePlugins中提供需要禁用插入媒体选项的参数。如果至少能有这个功能，任何帮助都将不胜感激。

提前致谢。

- RP1

Answer 1

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

在您的angular组件.ts文件的构造函数中添加以下代码将创建一个简单的CKEditor，并仅包含items数组中指定的那些选项。 mediaEmbed是负责在CKEditor中显示“插入视频”选项的项目名称，我没有在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'
    };

添加上述代码后的结果

希望这能对某人有所帮助！

- RP1

---

你可以将上述代码放置在 app.component.ts 中进行全局配置，而不是在单个组件中配置。 - Le Quang Nhan

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

Answer 3

尝试将配置作为输入传递。

- user1718248

---

<ckeditor [config]="{ removePlugins: ['MediaEmbed'], mediaEmbed: {} }"

- user1718248

Answer 4

这很不直观，我知道。

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

您可以通过以下方式获取所有可用插件列表：

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

- crimson_king

Answer 5

解决问题的第一种方法

进入node modules -> @ckeditor -> ckeditor-build-classic -> build ->ckeditor.js 在ckeditor.js中查找defaultConfig --- 你会在最后几行发现它

在这里移除不需要的字段，如table、media等

解决问题的第二种方法

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}

这里是完整列表：

例如 - 从编辑器中删除表格

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}

将其放置在组件.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}

- Rajat Rastogi

Answer 6

我认为你走在了正确的道路上。我能够通过使用removePlugins配置选项来实现这一点。关键是确保您removePlugins数组中的项目与默认工具栏配置中的项目名称匹配。

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

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

- dunncl15