How to use medium-editor - 10 common examples

componentDidMount() {
    var _this = this;

    var dom = ReactDOM.findDOMNode(this);
    this.dom = dom;
    var options = this.props.options;
    console.log(options);
    this.medium = new MediumEditor(dom, options);
    // this.medium.setContent(this.state.content);

    this.medium.subscribe('editableKeydown', this.handleBeforeInput);

    if(this.props.enterCapture) {
      this.medium.subscribe('editableKeyup', this.captureReturn);
      this.medium.subscribe('editableInput', (e) => {
        this._updated = true;
        this.change(dom.innerHTML.replace('<p><br></p>', ''));
      });
    } else {
      this.medium.subscribe('editableInput', (e) =&gt; {
        this._updated = true;
        this.change(dom.innerHTML);
      });
    }

import React from 'react'
import ReactDOM from 'react-dom'
import MediumEditor from 'medium-editor'
import ReactTooltip from 'react-tooltip'
import TooltipContent from './TooltipContent'

const LinkPreview = MediumEditor.extensions.anchorPreview.extend({
  name: 'link-preview',
  handleEditableMouseover: function (event) {
    const target = MediumEditor.util.getClosestTag(event.target, 'a');

    if (target === false) {
      return null
    }
    // Detect empty href attributes
    // The browser will make href="" or href="#top"
    // into absolute urls when accessed as event.target.href, so check the html
    if (!this.showOnEmptyLinks && (!/href=["']\S+["']/.test(target.outerHTML) || /href=["']#\S+["']/.test(target.outerHTML))) {
      return true
    }
    // only show when toolbar is not present
    const toolbar = this.base.getExtensionByName('toolbar');
    if (!this.showWhenToolbarIsVisible && toolbar && toolbar.isDisplayed && toolbar.isDisplayed()) {

handleEditableMouseover: function (event) {
    const target = MediumEditor.util.getClosestTag(event.target, 'a');

    if (target === false) {
      return null
    }
    // Detect empty href attributes
    // The browser will make href="" or href="#top"
    // into absolute urls when accessed as event.target.href, so check the html
    if (!this.showOnEmptyLinks && (!/href=["']\S+["']/.test(target.outerHTML) || /href=["']#\S+["']/.test(target.outerHTML))) {
      return true
    }
    // only show when toolbar is not present
    const toolbar = this.base.getExtensionByName('toolbar');
    if (!this.showWhenToolbarIsVisible && toolbar && toolbar.isDisplayed && toolbar.isDisplayed()) {
      return true
    }
    // detach handler for other anchor in case we hovered multiple anchors quickly

filesById[file.link] = file

    const isImage = file.type.match(/^image/)

    var content

    if (isImage) {
      content = h('img', {
        src: `http://localhost:8989/blobs/get/${encodeURIComponent(file.link)}`,
        alt: file.name
      })
    } else {
      content = h('a', { href: file.link }, file.name)
    }
    // TODO - insert where the mouse is yo
    var editor = MediumEditor.getEditorFromElement(composer)
    composer.insertBefore(
      h('p', content),
      editor.currentEl || null
    )

    saveDraft({ composer, meta, api })

    console.log('added:', file)
  })

componentDidMount () {
    if (this.state.contentEditable) {
      this.editorActivated = false
      const contentWindow = document.getElementById('vcv-editor-iframe').contentWindow
      const dom = ReactDOM.findDOMNode(this)
      this.medium = new MediumEditor(dom, {
        delay: 1000,
        toolbar: {buttons: ['bold', 'italic', 'underline']},
        paste: {
          cleanPastedHTML: true,
          cleanAttrs: ['style', 'dir'],
          cleanTags: ['label', 'meta'],
          unwrapTags: ['sub', 'sup']
        },
        contentWindow: contentWindow,
        ownerDocument: contentWindow.document,
        elementsContainer: contentWindow.document.body
      })
/*      dom.addEventListener('mousedown', () => {

      }) */
      /* const contentWindow = document.getElementById('vcv-editor-iframe').contentWindow

componentDidMount() {
        const dom = ReactDOM.findDOMNode(this);
        this.medium = new MediumEditor(dom, {
            toolbar: {
                buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote', 'image'],
            },
            placeholder: {
                text: '',
                hideOnClick: true
            },
        })
        const _this = this
        $(dom).mediumInsert({
            editor: this.medium,
            addons: {
                embeds: {
                    // placeholder: 'Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter', //available
                    placeholder: 'Paste a YouTube or Vimeo and press Enter', // the ones with iframes
                    oembedProxy: null,

const anchorExtension = this.base.getExtensionByName(anchorEl.getAttribute('data-linktype') === 'document' ? 'linkdoc' : 'link')
      if (anchorExtension) {
        event.preventDefault()
        this.base.selectElement(anchorEl)
        // Using setTimeout + delay because:
        // We may actually be displaying the anchor form, which should be controlled by delay
        this.base.delay(() => {
          anchorExtension.showModalWorkflow(anchorEl.getAttribute('data-parent-id'), anchorEl.getAttribute('href'))
        })
      }
    }
    this.hidePreview()
  },
})

MediumEditor.extensions.linkPreview = LinkPreview

export default LinkPreview

node.textContent = removeChar(node.textContent, position - 1);

    const caret = getCaret(node);
    caret.setPosition(position - 2);
   }
   else {
     node.innerHTML = insertString(node.innerHTML, htmlPosition, '.');
     node.textContent = removeChar(node.textContent, position);

     const caret = getCaret(node);
     caret.setPosition(position)
     //MediumEditor.selection.moveCursor(document, node, position)
   }
}

export default MediumEditor.Extension.extend({
  name: 'cheeky-keys', // Safe to say we're in our own namespace here.

  triggers: [
    {
      key:     '"',
      handler: handleDoubleQuote,
    },

    {
      key:     "'",
      handler: handleSingleQuote,
    },

    {
      key:     '.',
      handler: handleElipsis,

function initialiseMedium ({ api, page, el, meta }) {
  const strings = api.translations.sync.strings()
  const draft = api.drafts.sync.get(DRAFT_LOCATION) || {}

  var editor = new MediumEditor(el, {
    placeholder: {
      text: draft.body ? '' : strings.blogNew.actions.writeBlog
    },
    elementsContainer: page,
    // autoLink: true,
    buttonLabels: 'fontawesome',
    imageDragging: true,
    toolbar: {
      allowMultiParagraphSelection: true,
      buttons: [
        'bold',
        'italic',
        'anchor',
        {
          name: 'h2',
          contentFA: '<i class="fa fa-header">',</i>

})
        };

        if (insertButtons.length) {
            options.extensions.insertMedia = new InsertMedia();
            options.extensions.insert = new Insert({
                buttons: insertButtons
            });
        }

        self._lock = true;
        let editor = new MediumEditor(this._element, options);

        // allows use of section for editing to function properly
        MediumEditor.util.blockContainerElementNames.splice(MediumEditor.util.blockContainerElementNames.indexOf('section'), 1);

        editor.subscribe('editableKeydownEnter', function (event) {
            if (event.shiftKey) {
                //var node = MediumEditor.selection.getSelectionStart(editor.options.ownerDocument);
                MediumEditor.util.insertHTMLCommand(editor.options.ownerDocument, '[BR]');
                self._element.innerHTML = self._element.innerHTML.replace(/\[BR\]/g, '<br>');
                self._element.dispatchEvent(new Event('change'));
                event.preventDefault();
            } else if (self._element.hasAttribute('data-lky-singleline')) {
                event.preventDefault();
            }
        });

        Array.prototype.slice
            .call(this._element.querySelectorAll('img, video'))
            .forEach(element =&gt; Wysiwyg.initInTextMedia(new Media(element, true)));