help-center-wysiwyg

Wysiwyg editor used in Zendesk Help Center

Important

This custom CKEditor build cannot be used outside of Zendesk Help Center which is properly licensed to use CKEditor 5. For more information see LICENSE.md.

Install

$ yarn add @zendesk/help-center-wysiwyg

API

The easiest way to initialize the editor is using createEditor:

createEditor

import { createEditor } from "@zendesk/help-center-wysiwyg"

const editor = await createEditor(target, {
  editorType: "supportRequests", // "comments" | "communityPosts" | "supportRequests"
  hasAtMentions: true,
  userRole: "admin",
  brandId: 123,
  baseLocale: "en-us"
});

getEditorConfig

If you're using react and don't need the editor instance, you can also render the editor using @ckeditor/ckeditor5-react:

import { render } from "react-dom";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor, { getEditorConfig } from "@zendesk/help-center-wysiwyg";

render(
  <CKEditor
    editor={Editor}
    config={getEditorConfig({
      editorType: "comments",
      hasAtMentions: true,
      userRole: "admin",
      brandId: 123,
      baseLocale: "en-us"
    })}
  />,
  target
);

Not available when the editorType is "supportRequests".

editor.plugins.get("Notification")

Handling notifications can be done by directly accessing the Notification plugin:

  const notifications = editor.plugins.get("Notification");

  notifications.on("show", (event, data) => {
    const message = data.message instanceof Error ? data.message.message : data.message;
    const { type, title } = data;
    // Log to the console or use your own notification dispatcher:
    console.log({ type, title, message });
  });

Development

There is an example page in [public/index.html] and it can be ran with:

yarn start

You should then be able to access it in your browser:

open http://localhost:8080/

zendesk / help-center-wysiwyg