From e27811215c94e9c90a5f78239a5ab2acdeb5ca46 Mon Sep 17 00:00:00 2001 From: IbrahimJaved Date: Tue, 10 Jan 2023 15:19:40 +0500 Subject: [PATCH 1/2] initial commit: custom ckeditor img plugin --- static/js/lib/ckeditor/CKEditor.ts | 5 ++ static/js/lib/ckeditor/plugins/Image.ts | 0 .../js/lib/ckeditor/plugins/ImageEditing.ts | 46 +++++++++++++++++++ static/js/lib/ckeditor/plugins/ImageUI.ts | 30 ++++++++++++ 4 files changed, 81 insertions(+) create mode 100644 static/js/lib/ckeditor/plugins/Image.ts create mode 100644 static/js/lib/ckeditor/plugins/ImageEditing.ts create mode 100644 static/js/lib/ckeditor/plugins/ImageUI.ts diff --git a/static/js/lib/ckeditor/CKEditor.ts b/static/js/lib/ckeditor/CKEditor.ts index ef368d776..fba0c2b2d 100644 --- a/static/js/lib/ckeditor/CKEditor.ts +++ b/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", diff --git a/static/js/lib/ckeditor/plugins/Image.ts b/static/js/lib/ckeditor/plugins/Image.ts new file mode 100644 index 000000000..e69de29bb diff --git a/static/js/lib/ckeditor/plugins/ImageEditing.ts b/static/js/lib/ckeditor/plugins/ImageEditing.ts new file mode 100644 index 000000000..1aad3554a --- /dev/null +++ b/static/js/lib/ckeditor/plugins/ImageEditing.ts @@ -0,0 +1,46 @@ +// abbreviation/abbreviationediting.js + +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; + } + } + } ); + } +} \ No newline at end of file diff --git a/static/js/lib/ckeditor/plugins/ImageUI.ts b/static/js/lib/ckeditor/plugins/ImageUI.ts new file mode 100644 index 000000000..e99518f2d --- /dev/null +++ b/static/js/lib/ckeditor/plugins/ImageUI.ts @@ -0,0 +1,30 @@ +// abbreviation/abbreviationui.js +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; + } ); + } +} \ No newline at end of file From abbd2c4c3b7781d4cc320a9859bf05e019deedbe Mon Sep 17 00:00:00 2001 From: IbrahimJaved Date: Tue, 10 Jan 2023 15:20:28 +0500 Subject: [PATCH 2/2] initial commit: custom ckeditor img plugin --- static/js/lib/ckeditor/plugins/Image.ts | 9 +++++++++ static/js/lib/ckeditor/plugins/ImageEditing.ts | 4 +--- static/js/lib/ckeditor/plugins/ImageUI.ts | 3 +-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/static/js/lib/ckeditor/plugins/Image.ts b/static/js/lib/ckeditor/plugins/Image.ts index e69de29bb..2423030f8 100644 --- a/static/js/lib/ckeditor/plugins/Image.ts +++ b/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 ]; + } +} diff --git a/static/js/lib/ckeditor/plugins/ImageEditing.ts b/static/js/lib/ckeditor/plugins/ImageEditing.ts index 1aad3554a..fefdad42c 100644 --- a/static/js/lib/ckeditor/plugins/ImageEditing.ts +++ b/static/js/lib/ckeditor/plugins/ImageEditing.ts @@ -1,5 +1,3 @@ -// abbreviation/abbreviationediting.js - import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; export default class ImageEditing extends Plugin { @@ -43,4 +41,4 @@ export default class ImageEditing extends Plugin { } } ); } -} \ No newline at end of file +} diff --git a/static/js/lib/ckeditor/plugins/ImageUI.ts b/static/js/lib/ckeditor/plugins/ImageUI.ts index e99518f2d..08a7a1a64 100644 --- a/static/js/lib/ckeditor/plugins/ImageUI.ts +++ b/static/js/lib/ckeditor/plugins/ImageUI.ts @@ -1,4 +1,3 @@ -// abbreviation/abbreviationui.js import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview" import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; @@ -27,4 +26,4 @@ export default class ImageUI extends Plugin { return button; } ); } -} \ No newline at end of file +}