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

问题描述

基本上我希望能够生成<code>{a: true}</code>之类的html

据我所知,该按钮应该执行与“下划线”按钮相同的操作,除了它将文本用<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',}

该按钮显示在工具栏中,但是单击该按钮后什么也没有发生。该文档显示了用于插入文本的按钮,但是我需要一个用于包裹文本的按钮。

解决方法

好吧,我在看完他们的代码后才发现它,虽然没有很好的文档记录,但这是您的操作方式:

{
  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',tooltip: 'Insert blockqoute','blockquote');
      },'blockquote',}