Ckeditor-build

ckeditor 编辑器 - 自定义构建

Install

pnpm add ckeditor5-build-task

Hot to use

import CKEditor from 'ckeditor5-build-task';

function Editor(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 | * | | 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 editorrenderTaskItem, 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) => {
      ReactDOM.render(
        <TaskItem
          title={item.title}
          completeStatus={item.completeStatus}
          uniqueSearchId={item.uniqueSearchId}
          assignee={item.assignee}
          category={item.category}
          dueDate={item.dueDate}
        />,
        domElement,
      );
    },
    renderMemberItem: (item, domElement) => {
      ReactDOM.render(
        <MemberItem
          avatar={processAvatarUrl(item.avatar)}
          name={item.name}
        />,
        domElement,
      );
    },
    renderLoading: (domElement) => {
      ReactDOM.render(
        <div>Loading</div>,
        domElement,
      );
    },
    openTask,
})