Custom Extensions

[stanonyime]

How does one add custom extensions? I followed the custom button example on the medium editor website added to the options but nothing appeared.

[wangzuo]

what's the error?

[stanonyime]

There was no error but the custom button did not show

[wangzuo]

Any code snippet?

[stanonyime]

This is how I tried using them together:

import Editor from 'react-medium-editor'
import React from 'react'
import MediumEditor from 'medium-editor'
var HighlighterButton = MediumEditor.Extension.extend({
  name: 'highlighter',

  init: function () {
    this.button = this.document.createElement('button');
    this.button.classList.add('medium-editor-action');
    this.button.innerHTML = '<b>H</b>';
  },

  getButton: function () {
    return this.button;
  }
});
class EditorMedium extends React.Component {
  render(){
  const buttons  = ['bold', 'italic', 'underline']
    return ( <Editor
          {...this.props}
          tag="p"
          text="Sample text"
          onChange={this.props.onValue}
          options={{toolbar: {buttons: buttons,extensions:{'highlighter': new HighlighterButton()}}}}
        />)
  }
}

When I render the element and make a selection, I only see the buttons for Bold, Italic, and Underline

[oyeanuj]

@wangzuo, thanks for this library! An add-on question:

• Can extensions be React Components, i.e., the element is a React Component instead of a native HTML element?

[oyeanuj]

@stanonyime Did you find a solution to your problem above?

@wangzuo Any thoughts on my question above?

[stanonyime]

@oyeanuj No

[ilyadoroshin]

I've used MediumButton and it worked fine, the only thing is that clicking this button doesn't trigger onChange event of react component..

[EugeneSnihovsky]

Hello guys! Is there a way to add medium-editor-insert-plugin? For now I can't figure out how to do this and switch to dark side - write my own react component with medium-editor. I already see this issue, but I don't use class component