Plugins

We provide many built-in plugins, most of which are easy to use. Below are a few special plugins.

You can set the config of a plugin to change some values. Take a look at the about plugin.

Configure

All plugins have some toolbar conf, like:

• addToNormalToolbar: add the button(s) and / or select(s) to normal toolbar
• addToNormalToolbarInsertMenu: add the button(s) and / or select(s) to normal toolbar’s insert menu
• addToBubbleToolbar: add the button(s) and / or select(s) to bubble toolbar

If the plugin only has one button or select, these three field is boolean type, otherwise they are object type.

For example, in plugin image, it likes:

export type PluginConf = {
  addToNormalToolbar: boolean;
  addToNormalToolbarInsertMenu: boolean;
  addToBubbleToolbar: boolean;
  defaultAlt: string;
  defaultSrc: string;
};

and in plugin lists, it likes:

export type PluginConf = {
  addToNormalToolbar: {
    ol: boolean;
    ul: boolean;
  };
  addToNormalToolbarInsertMenu: {
    ol: boolean;
    ul: boolean;
  };
  addToBubbleToolbar: {
    ol: boolean;
    ul: boolean;
  };
  defaultInnerHTML: string;
};

Plugin about

The about plugin is automatically loaded by default. There is no need to add it to the plugins parameter of the existing.init function.

If you have the authorization and want disable the about plugin:

exsied.init({
  id: "app",
  plugins: [],
  enableToolbarBubble: true,
  iAbideByExsiedLicenseAndDisableTheAboutPlugin: true, // Add this param
});

If you have customized any functions, you should add your own information to about.conf.deveploers.

import { exsied, plugins } from "@exsied/exsied";

plugins.about.conf.deveploers.push(
  {
    name: "fivim github",
    repoLink: "https://github.com/fivim/fivim",
    webSiteLink: "https://xxx.com/xxx",
    email: "[email protected]",
    extContent: `fivim's github repo`,
  },
  {
    name: "fivim gitee",
    repoLink: "https://gitee.com/fivim/fivim",
    webSiteLink: "https://xxx.com/xxx",
    email: "[email protected]",
    extContent: `fivim's gitee repo`,
  }
);

Plugin redoAndUndo

You can provied two callback in redoAndUndo.conf to compress and uncompress the content:

• compressCb: (str: string) => any
• uncompressCb: (value: any) => string

Plugin link

You can provied a callback in redoAndUndo.conf:

• clickLinkCb: handle click event of tag a

Plugin sourceCode

It will process the <pre><code> tags.

Due to the fact that exsied does not have any dependencies, so it cannot highlight or edit code, developers should overwrite the functions in sourceCode.conf:

• renderDataCb: Used to highlight code, highlight.js is recommended
• editDataCb: Used to edit code, codemirror is recommended. After editing, use const ele = document.querySelector([${DATA_ATTR.sign}="${sign}"]) to find the original code element, and update it.
• randomCharsCb: Used to generate random chars.
• aferInitSourceCodeViewCb: call it afer init source code view, you can add highlight functions here.
• inputInSourceCodeViewCb: call it when user input in source code view, you can add highlight functions here.

Sample code

import { exsied, plugins } from '@exsied/exsied'
import { PluginConf } from '@exsied/exsied/dist/plugins/source_code/base'
import hljs from 'highlight.js'
import c from 'highlight.js/lib/languages/c'
import cpp from 'highlight.js/lib/languages/cpp'
import { v4 as uuidv4 } from 'uuid'

// Register some languages
hljs.registerLanguage('c', c)
hljs.registerLanguage('cpp', cpp)

export const highlighCode = (str: string, lang: string) => {
  return hljs.highlight(str, { language: lang }).value
}

const sourceCodeConf = plugins.sourceCode.conf as PluginConf

sourceCodeConf.renderDataCb = (ele: HTMLElement) => {
  const lang = ele.getAttribute('lang') || ''
  const res = highlighCode(ele.innerHTML, lang)
  return `<pre><code>${res}</code></pre>`
}
sourceCodeConf.editDataCb = (ele: HTMLElement, sign: string) => {
  // do something
}
// replace the default randomChars with uuid
sourceCodeConf.randomCharsCb = () => {
  return uuidv4()
}