jodit - 如何在 Jodit 中创建自定义按钮以将文本包装在代码标签中？

Question

基本上我希望能够生成像<code>{a: true}</code>

据我所知，这个按钮应该和“下划线”按钮做同样的事情，除了它会把文本<code>换成<u>;

我试过用这个：

{
    buttons:
      'bold,strikethrough,underline,italic,eraser,|,superscript,subscript,|,ul,ol,align,|,outdent,indent,|,font,fontsize,brush,paragraph,|,image,video,table,link,|,undo,redo,\n,selectall,cut,copy,paste,copyformat,|,hr,symbol,source,fullsize,print,code',

    language: lang,
    placeholder,
    toolbarAdaptive: false,
    uploader: {
      insertImageAsBase64URI: true,
    },
    controls: {
      code: {
        name: 'code',
        iconURL: 'someurl.com',
        tagRegExp: '_PxEgEr_/^(code)$/i',
        tags: ['code'],
        tooltip: 'Code',
      },
    },
  }

该按钮显示在工具栏中，但是当我单击它时没有任何反应。文档显示了插入文本的按钮，但我需要一个换行文本的按钮。

Answer 1

好的，我在查看他们的代码后发现了它，它没有很好的文档记录，但这就是你的做法：

{
  buttons: 'blockquote,code',
  controls: {
    code: {
      name: 'code',
      iconURL: 'someiconurl.com',
      tooltip: 'Insert Code Block',
      exec: function (editor) {
        editor.execCommand('formatBlock', false, 'code');
      },
      isActive: (editor, control) => {
        const current = editor.s.current();
        return Boolean(
          current && Jodit.modules.Dom.closest(current, 'code', editor.editor)
        );
      },
    },
    blockquote: {
      name: 'blockquote',
      iconURL: 'someiconurl.com',
      tooltip: 'Insert blockqoute',
      exec: function (editor) {
        editor.execCommand('formatBlock', false, 'blockquote');
      },
      isActive: (editor, control) => {
        const current = editor.s.current();
        return Boolean(
          current && Jodit.modules.Dom.closest(current, 'blockquote', editor.editor)
        );
      },
    },
  },
}