Ckeditor5-iframe NPM

CKEditor 5 iframe feature ·

ckeditor5-iframe is based on CKEditor 5's HTML embed Plugin (NPM)

Renders links to <iframe src="...">

ckeditor5-iframe in a classic build.

Installation

via npm:

npm install ckeditor5-iframe --save-dev

via yarn:

yarn install ckeditor5-iframe --dev

Configuration

In your editor build / configuration:

import IframeEmbed from "ckeditor5-iframe/src/iframeembed";

ClassicEditor.create(document.querySelector("#editor"), {
  plugins: [Essentials, Paragraph, Bold, Italic, IframeEmbed],
  toolbar: ["bold", "italic", "iframeEmbed"],
});

Show previews

Preview option

Passing true to iframeEmbed.showPreviews will enable previewing.

import IframeEmbed from "ckeditor5-iframe/src/iframeembed";

ClassicEditor.create(document.querySelector("#editor"), {
  plugins: [Essentials, Paragraph, Bold, Italic, IframeEmbed],
  toolbar: ["bold", "italic", "iframeEmbed"],
  iframeEmbed: {
    showPreviews: true,
  },
});

The minimum dimensions are tweakable via CSS variables --ck-iframe-embed-content-min-height and --ck-iframe-embed-content-min-width.

Input format

<figure class="iframe-embed">
  <iframe src="https://www.google.com">
</figure>

Development

To boot up a development loop, clone the repo, install the packages via yarn, yarn start and go to http://localhost:8080

Dev environment

From here, you can customize demo/'s app.js and index.html as well as files inside src/ (the plugin code itself) and files will be automatically rebuilt. You still may need to refresh.

The window.editor can access the ClassicEditor object, e.g. editor.getData() can retrieve the output HTML.