Question

试图找出如何：

1）。向Froala editor添加一个按钮，该按钮将在<h1>中包含一系列文本（当前块）。 2）。如果当前选定的文本（或直接父块）是<h1>，则单击自定义按钮将删除<h1>。 3）。如果当前选定的文本（或直接父块）是<h1>，工具栏中的工具图标将突出显示。

..基本上是切换，典型的WYSIWYG编辑器行为。

我试图使用ES6类，而不是jQuery样式的sytax（如果可以避免）。我正在使用React，但同样适用于所有ES6类..

自定义按钮添加到工具栏中就好了：

export class RichEditor extends Component {
  /*code left out for brevity..*/

  // configEditor is called in constructor..
  configEditor() {

    let editorPlugins = [froala, image, table, link, list];
    editorPlugins.forEach(plugin => {
      plugin($);
    });

    let toolbarOptions = [
      'myButton',
      'h2',
      'bold'
    ];

    $.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'});
    $.FroalaEditor.RegisterCommand('myButton', {
      title: 'Header — TOC',
      icon: `<i style="font-style: normal;">
        <b>H2</b>
      </i>`,
      undo: true,
      focus: true,
      showOnMobile: true,
      refreshAfterCallback: true,
      callback: function () {
        /*
          ******************
          WHAT TO PUT HERE??
          ******************
        */
      }
    });

    /*this.$editorNode set in constructor*/
    this.$editorNode
      .froalaEditor({
        toolbarButtons: toolbarOptions,
        toolbarButtonsMD: toolbarOptions
        imageUploadURL: '/upload_media',
      })
      .on('froalaEditor.contentChanged', (e, editor) => {         
         //handle change
      });
  }
  }

  render() {
    return (
      <div>
        <textarea id="rich-editor" name="content"></textarea>
      </div>
    );
  }
}

在上面的代码段回调中放入什么（什么东西放在这里）

在那部分中，我以前尝试过..

let txt = this.selection.text();
 if (txt === undefined) return;

 this.html.insert(
  `<h2>
    ${txt}
  </h2>`
 );

这工作正常，但工具栏中的图标未突出显示。文字w粗体/下划线应用..

如果没有选择任何内容，H1按钮会插入许多<br>包裹的`，这几乎不可能在编辑器中删除。

第二次尝试：使用jQuery
在回调中，我可以做类似的事情...... $(this.selection.element()).wrap('<h2></h2>') 使用jQuery，但如果可能的话会更喜欢使用froala wysiwyg编辑器的API。而且，当选择这行代码时，这不会突出显示工具栏中的图标，表明它是样式化的（就像其他代码一样）

第三次尝试

在docs中建议在回调中使用this.paragraphFormat。 ``` this.paragraphFormat.apply（ 'H2'）

```

但paragraphFormat无法使用this。

// paragraphFormat上没有this方法。

如何在Froala编辑器中添加带有类的自定义html

0 个答案: