插件

我们提供了许多内置插件，其中大多数都很容易使用。下面是一些特殊的插件。

您可以设置插件的config来更改某些值。看看关于about插件。

配置

所有插件都有一些工具栏 conf，比如：

• addToNormalToolbar：将按钮和/或 select 添加到普通工具栏
• addToNormalToolbarInsertMenu：将按钮和/或 select 添加到普通工具栏的插入菜单
• addToBubbleToolbar：将按钮和/或 select 添加到气泡工具栏

如果插件只有一个按钮或 select，则这三个字段为boolean，否则为object。

例如，在插件image，类似:

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

在插件lists， 类似:

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

插件 about

默认情况下，about插件会自动加载。不需要将其添加到existing.init函数的plugins参数中。

如果您有授权并想要禁用about插件：

exsied.init({
  id: "app",
  plugins: [],
  enableToolbarBubble: true,
  iAbideByExsiedLicenseAndDisableTheAboutPlugin: true, // 添加这一行
});

如果您自定义了任何功能，则应将自己的信息添加到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`,
  }
);

插件 redoAndUndo

您可以在redoAndUndo.conf中提供两个回调来压缩和解压缩：

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

插件 link

您可以在 redoAndUndo.conf:中提供回调函数

• clickLinkCb: 处理 a 标签的点击事件

插件 sourceCode

它将处理<pre><code>标记。

由于exsied没有任何依赖项，因此它无法高亮显示或编辑代码，因此开发人员应覆盖sourceCode.conf中的函数：

• renderDataCb：用于高亮显示代码，建议使用highlight.js
• editDataCb：用于编辑代码，建议使用代码镜像。编辑后，使用const ele=document.querySelector([${dataAttr.sign}=“${sign}”])查找原始的code元素，并对其进行更新。
• randomCharsCb：用于生成随机字符。
• aferInitSourceCodeViewCb：在初始化源代码视图之后调用，您可以在此处添加突出显示函数。
• inputInSourceCodeViewCb：当用户在源代码视图中输入时调用，您可以在此处添加高亮显示函数。

示例代码

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'

// 注册语言
hljs.registerLanguage('c', c)
hljs.registerLanguage('cpp', cpp)

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

  return str
}

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()
}