mycolorway · SnowChasm · Mar 12, 2024 · Mar 11, 2024 · Mar 12, 2024
diff --git a/README.md b/README.md
@@ -1,39 +1,42 @@
 # Ckeditor-build
+
 ckeditor 编辑器 - 自定义构建
 
 # Install
+
 `pnpm add ckeditor5-build-task`
 
 # Hot to use
+
 ```javascript
 import CKEditor from 'ckeditor5-build-task';
 
 function Editor(props) {
-  return (
-    <CKEditor
-      {...props}
-    />
-  )
+  return <CKEditor {...props} />;
 }
 ```
 
 # Attributes
-| props | description | types | required |
-| ----- | ----------- | ----- | -------- |
-| type | classic, inline, balloon | string |    |
-| data | the editor content | string |   |
-| disabled | disabled | boolean |     |
-| openTask | Click the task name to open the task detail page | function | * |
-| apolloClient | the apollo client for mention and image upload plugins | object | * |
-| imageStorageUrl | the image prefix url | string | * |
-| onesAppLinkUrl | this ones app url | string | * |
-| customFunctions | render the custom functions to editor<br>renderTaskItem, renderMemberItem, renderLoading, openTask, uploadFile | object | * |
-| handleAfterCommandExec | Callback events for the editor functionality | function |   |
-| openImageViewer | Click on the image for a larger view | function | * |
-| onSyncTaskChange | used in task detail page to control the task description submit | function | * |
-| language | language | string |   |
+
+| props                     | description                                                                                                    | types    | required |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------- | -------- |
+| type                      | classic, inline, balloon                                                                                       | string   |          |
+| data                      | the editor content                                                                                             | string   |          |
+| disabled                  | disabled                                                                                                       | boolean  |          |
+| openTask                  | Click the task name to open the task detail page                                                               | function | \*       |
+| apolloClient              | the apollo client for mention and image upload plugins                                                         | object   | \*       |
+| imageStorageUrl           | the image prefix url                                                                                           | string   | \*       |
+| disableImageUpload        | disable image upload                                                                                           | boolean  | \*       |
+| disableImageUploadTooltip | image upload toolbar tooltip when disabled                                                                     | string   | \*       |
+| onesAppLinkUrl            | this ones app url                                                                                              | string   | \*       |
+| customFunctions           | render the custom functions to editor<br>renderTaskItem, renderMemberItem, renderLoading, openTask, uploadFile | object   | \*       |
+| handleAfterCommandExec    | Callback events for the editor functionality                                                                   | function |          |
+| openImageViewer           | Click on the image for a larger view                                                                           | function | \*       |
+| onSyncTaskChange          | used in task detail page to control the task description submit                                                | function | \*       |
+| language                  | language                                                                                                       | string   |          |
 
 # renderReactComponents example
+
 ```
 const renderReactComponents = useMemo(() => {
   renderTaskItem: (item, domElement) => {
@@ -67,7 +70,3 @@ const renderReactComponents = useMemo(() => {
     openTask,
 })
 ```
-
-
-
-
diff --git a/build/ckeditor.js b/build/ckeditor.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-build-task",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "ONES Task 编辑器",
   "main": "./build/ckeditor.js",
   "files": [

diff --git a/src/editor/editor.jsx b/src/editor/editor.jsx
@@ -14,9 +14,7 @@ import './translations/ja-JP';
 import configs from './config';
 import { noop } from './utils';
 
-
 function Editor(props) {
-
   const {
     openImageViewer = noop,
     baseConfig = 'defaultConfig',
@@ -33,7 +31,7 @@ function Editor(props) {
     viewportTopOffset,
     handleAfterCommandExec = noop,
     ...otherProps
-  } = props
+  } = props;
 
   const editorBase = useMemo(() => {
     switch (type) {
@@ -45,20 +43,20 @@ function Editor(props) {
       default:
         return ClassicEditor;
     }
-  }, [])
+  }, []);
 
   const mergedConfig = useMemo(() => {
     const result = {
       ...(configs[baseConfig] || {}),
       ...otherProps,
-    }
+    };
     if (viewportTopOffset) {
       Object.assign(result.toolbar, {
-        viewportTopOffset
-      })
+        viewportTopOffset,
+      });
     }
-    return result
-  })
+    return result;
+  });
 
   // 延迟操作状态变更
   const needPending = useRef(false);
@@ -118,7 +116,8 @@ function Editor(props) {
       // https://github.com/ckeditor/ckeditor5/issues/2343#issuecomment-382711345
       // 气泡工具栏的箭头是硬编码，去掉箭头及预留空间需要按照上述官方推荐的做法
 
-      const balloonPanelViewConstructor = editor.plugins.get('ContextualBalloon').view.constructor;
+      const balloonPanelViewConstructor =
+        editor.plugins.get('ContextualBalloon').view.constructor;
 
       balloonPanelViewConstructor.arrowHorizontalOffset = 25;
       balloonPanelViewConstructor.arrowVerticalOffset = 3;
@@ -140,13 +139,23 @@ function Editor(props) {
         btn.on('execute', () => handleAfterCommandExec(item));
       }
     });
+
+    const disableImageUpload = editor.config.get('disableImageUpload');
+    if (disableImageUpload) {
+      const toolbarItems = editor.ui.view.toolbar.items;
+      const imageToolbarButton = toolbarItems.get(16);
+      if (imageToolbarButton) {
+        const buttonView = imageToolbarButton.buttonView;
+        buttonView.isEnabled = false;
+        buttonView.tooltip = editor.config.get('disableImageUploadTooltip');
+      }
+    }
   };
 
   const ignoreBlurRef = useRef(false);
   const handleBlur = (event, editor) => {
     // 有正在进行的异步任务，例如上传图片
-    if (ignoreBlurRef.current
-      || needPending.current) {
+    if (ignoreBlurRef.current || needPending.current) {
       return;
     }
 
@@ -165,7 +174,7 @@ function Editor(props) {
     }
     editor.ui.element.classList.remove('ck-focused');
     if (onBlur) onBlur(event, editor);
-  }
+  };
 
   const handleFocus = (event, editor) => {
     ignoreBlurRef.current = true;
@@ -174,7 +183,7 @@ function Editor(props) {
     }, 100);
     editor.ui.element.classList.add('ck-focused');
     if (onFocus) onFocus(event, editor);
-  }
+  };
 
   return (
     <CKEditor
@@ -187,7 +196,7 @@ function Editor(props) {
       onBlur={handleBlur}
       onFocus={handleFocus}
     />
-  )
+  );
 }
 
-export default Editor;
+export default Editor;
diff --git a/src/editor/plugins/ones-image/OnesImage.js b/src/editor/plugins/ones-image/OnesImage.js
@@ -1,64 +1,75 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 class CustomImagePlugin extends Plugin {
+  init() {
+    this.resourceKey = 'signedBlobId';
+    this.domDataKey = 'data-task-signed-blob-id';
+    // 扩展属性
+    this.extendSchema();
 
-    init() {
-      this.resourceKey = 'signedBlobId';
-      this.domDataKey = 'data-task-signed-blob-id'
-      // 扩展属性
-      this.extendSchema();
+    // 定义数据转换规则
+    this.defineConversion();
 
-      // 定义数据转换规则
-      this.defineConversion();
+    // 监听上传完成事件, 新增属性
+    this.initUploadedHandler();
+  }
 
-      // 监听上传完成事件, 新增属性
-      this.initUploadedHandler();
-    }
+  defineConversion() {
+    const { editor } = this;
 
-    defineConversion() {
-      const { editor } = this;
-
-      editor.conversion.for( 'upcast' ).attributeToAttribute( {
-        view: this.domDataKey,
-        model: this.resourceKey,
-      } );
+    editor.conversion.for('upcast').attributeToAttribute({
+      view: this.domDataKey,
+      model: this.resourceKey,
+    });
 
-      editor.conversion.for( 'downcast' ).add( dispatcher => {
-        dispatcher.on( `attribute:${this.resourceKey}:imageBlock`, ( evt, data, conversionApi ) => {
-          if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+    editor.conversion.for('downcast').add((dispatcher) => {
+      dispatcher.on(
+        `attribute:${this.resourceKey}:imageBlock`,
+        (evt, data, conversionApi) => {
+          if (!conversionApi.consumable.consume(data.item, evt.name)) {
             return;
           }
 
           const viewWriter = conversionApi.writer;
-          const figure = conversionApi.mapper.toViewElement( data.item );
-          const img = figure.getChild( 0 );
+          const figure = conversionApi.mapper.toViewElement(data.item);
+          const img = figure.getChild(0);
 
-          if ( data.attributeNewValue !== null ) {
-            viewWriter.setAttribute( this.domDataKey, data.attributeNewValue, img );
+          if (data.attributeNewValue !== null) {
+            viewWriter.setAttribute(
+              this.domDataKey,
+              data.attributeNewValue,
+              img
+            );
           } else {
-            viewWriter.removeAttribute( this.domDataKey, img );
+            viewWriter.removeAttribute(this.domDataKey, img);
           }
-        } );
-      });
-    }
-
-    extendSchema() {
-      const { schema } = this.editor.model;
-      schema.extend( 'imageBlock', { allowAttributes: this.resourceKey } );
-    }
+        }
+      );
+    });
+  }
 
-    initUploadedHandler() {
-      const { editor } = this;
-      const imageUploadEditing = editor.plugins.get( 'ImageUploadEditing' );
+  extendSchema() {
+    const { schema } = this.editor.model;
+    schema.extend('imageBlock', { allowAttributes: this.resourceKey });
+  }
 
-      imageUploadEditing.on( 'uploadComplete', ( evt, { data, imageElement } ) => {
+  initUploadedHandler() {
+    const { editor } = this;
+    try {
+      const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
+      imageUploadEditing.on('uploadComplete', (evt, { data, imageElement }) => {
         if (data[this.resourceKey]) {
-          editor.model.change( writer => {
-            writer.setAttribute( this.resourceKey, data[this.resourceKey], imageElement );
-          } );
+          editor.model.change((writer) => {
+            writer.setAttribute(
+              this.resourceKey,
+              data[this.resourceKey],
+              imageElement
+            );
+          });
         }
-      } );
-    }
+      });
+    } catch (e) {}
+  }
 }
 
 export default CustomImagePlugin;
diff --git a/src/editor/plugins/upload-adapter/uploadAdapter.js b/src/editor/plugins/upload-adapter/uploadAdapter.js
@@ -12,34 +12,36 @@ class Adapter {
 
   upload() {
     return this.loader.file.then(
-      (file) => new Promise((resolve, reject) => {
-        if (this.editor.plugins.has('PendingActions')) {
-          const pendingActions = this.editor.plugins.get('PendingActions');
-          this.uploadingAction = pendingActions.add('upload image');
-        }
-
-        this.uploadFile({
-          file,
-          resolve: (res) => {
-            if (this.editor.plugins.has('PendingActions')) {
-              const pendingActions = this.editor.plugins.get('PendingActions');
-              pendingActions.remove(this.uploadingAction);
-            }
-            resolve({
-              urls: {
-                default: res.imageUrl
-              },
-              signedBlobId: res.signedBlobId,
-            })
-          },
-          reject: (err) => {
-            reject(err.message);
-          },
-          onProgress: (percent) => {
-            this.loader.uploadedPercent = percent;
+      (file) =>
+        new Promise((resolve, reject) => {
+          if (this.editor.plugins.has('PendingActions')) {
+            const pendingActions = this.editor.plugins.get('PendingActions');
+            this.uploadingAction = pendingActions.add('upload image');
           }
+
+          this.uploadFile({
+            file,
+            resolve: (res) => {
+              if (this.editor.plugins.has('PendingActions')) {
+                const pendingActions =
+                  this.editor.plugins.get('PendingActions');
+                pendingActions.remove(this.uploadingAction);
+              }
+              resolve({
+                urls: {
+                  default: res.imageUrl,
+                },
+                signedBlobId: res.signedBlobId,
+              });
+            },
+            reject: (err) => {
+              reject(err.message);
+            },
+            onProgress: (percent) => {
+              this.loader.uploadedPercent = percent;
+            },
+          });
         })
-      }),
     );
   }
 }
@@ -54,8 +56,28 @@ export default class UploadAdapter extends Plugin {
   }
 
   init() {
+    const disableImageUpload = this.editor.config.get('disableImageUpload');
     const plugin = this.editor.plugins.get('FileRepository');
     const imageStorageUrl = this.editor.config.get('imageStorageUrl');
-    plugin.createUploadAdapter = (loader) => new Adapter(loader, this.editor, imageStorageUrl);
+
+    if (disableImageUpload) {
+      // 禁用图片上传
+      plugin.createUploadAdapter = null;
+      // 阻止放入图片
+      this.editor.plugins
+        .get('Clipboard')
+        .on('inputTransformation', (evt, data) => {
+          for (const element of data.content.getChildren()) {
+            console.log('element', element);
+            if (element.name === 'img') {
+              evt.stop();
+            }
+          }
+        });
+      return;
+    }
+
+    plugin.createUploadAdapter = (loader) =>
+      new Adapter(loader, this.editor, imageStorageUrl);
   }
 }