Ckeditor img plugin

static/js/lib/ckeditor/CKEditor.ts

@@ -19,6 +19,7 @@ import CodeBlockPlugin from "@ckeditor/ckeditor5-code-block/src/codeblock"
 import CodePlugin from "@ckeditor/ckeditor5-basic-styles/src/code"
 import Mathematics from "ckeditor5-math/src/math"
 import MathSyntax from "./plugins/MathSyntax"
+import Image from "./plugins/Image"
 
 import { Editor } from "@ckeditor/ckeditor5-core"
 
@@ -66,6 +67,7 @@ const SUPPORTED_PROGRAMMING_LANGUAGES = [
 
 export const FullEditorConfig = {
   plugins: [
+    Image,
     EssentialsPlugin,
     AutoformatPlugin,
     BoldPlugin,
@@ -100,6 +102,7 @@ export const FullEditorConfig = {
   ],
   toolbar: {
     items: [
+      "img",
       "heading",
       "|",
       "bold",
@@ -141,6 +144,7 @@ export const FullEditorConfig = {
 
 export const MinimalEditorConfig = {
   plugins: [
+    Image,
     EssentialsPlugin,
     AutoformatPlugin,
     BoldPlugin,
@@ -160,6 +164,7 @@ export const MinimalEditorConfig = {
   ],
   toolbar: {
     items: [
+      "img",
       "bold",
       "italic",
       "code",

static/js/lib/ckeditor/plugins/Image.ts

@@ -0,0 +1,9 @@
+import ImageEditing from './ImageEditing';
+import ImageUI from './ImageUI';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+export default class Image extends Plugin {
+    static get requires() {
+        return [ ImageEditing, ImageUI ];
+    }
+}

static/js/lib/ckeditor/plugins/ImageEditing.ts

@@ -0,0 +1,44 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+export default class ImageEditing extends Plugin {
+    init() {
+        this._defineSchema();	
+        this._defineConverters();							
+    }
+
+    _defineSchema() {											
+        const schema = this.editor.model.schema;
+
+        schema.extend( '$text', {
+            allowAttributes: [ 'img' ]
+        } );
+    }
+
+    _defineConverters() {									
+        const conversion = this.editor.conversion;
+
+        conversion.for( 'downcast' ).attributeToElement( {
+            model: 'img',
+            view: ( modelAttributeValue:any, conversionApi:any ) => {
+                const { writer } = conversionApi;
+                return writer.createAttributeElement( 'img', {
+                    src: modelAttributeValue
+                } );
+            }
+        } );
+        // Conversion from a view element to a model attribute.
+        conversion.for( 'upcast' ).elementToAttribute( {
+            view: {
+                name: 'img',
+                attributes: [ 'src' ]
+            },
+            model: {
+                key: 'img',
+                value: viewElement => {
+                    const img = viewElement.getAttribute( 'src' );
+                    return img;
+                }
+            }
+        } );
+    }
+}

static/js/lib/ckeditor/plugins/ImageUI.ts

@@ -0,0 +1,29 @@
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview"
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+export default class ImageUI extends Plugin {
+    init(): void {
+        const editor = this.editor;
+
+        editor.ui.componentFactory.add( 'img', () => {
+            const button = new ButtonView();
+            button.set({
+                label:    "img",
+                withText: true,
+                tooltip: true
+              })
+            this.listenTo( button, 'execute', () => {
+                const src = 'https://pbs.twimg.com/media/E4OzGLfX0AoMeuD.jpg';
+                editor.model.change( (writer:any) => {
+                    editor.model.insertContent(
+                        // Create a text node with the img attribute.
+                        writer.createText('img',{ img: src } )
+                    );
+                } );
+            } );
+
+            return button;
+        } );
+    }
+}