[컴][웹] Medium Editor 사용해 보기

medium editor

medium site 에서 사용하는 editor 와 같은 기능을 제공한다.

• GitHub - yabwe/medium-editor: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

장점

• 화면에서 버튼을 이용해서 바로 추가적인 tag 를 넣을 수 있다. (underline, bold 등)
• 버튼bar 가 아닌 bubble tip 버튼을 이용해서 편집을 하기에 좀 더 직관적인다.
• 다양하게 확장이 가능하다.(extension)[ref. 1]

image insert

image 는 그냥 끌어다 놓으면 된다. 다만 이경우에 data:image/png 등의 모습으로 insert 된다. 이녀석은 server 단에서 image 로 변환하면 된다. 자세한 것은 아래 글을 참고하자.

• php - Uploading image (as data:image/png:base64) to webserver - Stack Overflow

local 에서 사용해보기

아래 4개의 파일을 경로에 맞춰서 local 에 넣자. 그리고 absoulte-container.html 을 실행하면 medium editor 를 사용해 볼 수 있다. 직접 demo 를 확인하고 싶다면 여기로 가자

<medium-editor>/dist/css/medium-editor.css
<medium-editor>/dist/css/themes/default.css
<medium-editor>/dist/js/medium-editor.js
<medium-editor>/demo/absolute-container.html

버튼 기능 확장

medium editor 의 버튼을 확장할 수 있다. 즉, 버튼을 추가하고, 원하는 기능을 넣을 수 있다. 자세한 사항은 아래 글에서 확인하자.

• Walkthrough - Building a Button

예제

아래처럼 editor의 toolbar 에 highlighter 를 추가할 수 있다.

var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'highlighter']
    },
    extensions: {
        'highlighter': new HighlighterButton(),
        ...
    }
});

HighlighterButton class 는 위 글에서 code 를 옮겨왔다. 아래 처럼 자신이 원하는 버튼 기능을 만들면 된다.(자세한 것은 위링크를 확인하자)

rangy.init();
var HighlighterButton = MediumEditor.Extension.extend({
  name: 'highlighter',

  init: function () {
    this.classApplier = rangy.createClassApplier('highlight', {
        elementTagName: 'mark',
        normalize: true
    });

    this.button = this.document.createElement('button');
    this.button.classList.add('medium-editor-action');
    this.button.innerHTML = '<b>H</b>';
    this.button.title = 'Highlight';

    this.on(this.button, 'click', this.handleClick.bind(this));
  },

  getButton: function () {
    return this.button;
  },

  handleClick: function (event) {
    this.classApplier.toggleSelection();

    // Ensure the editor knows about an html change so watchers are notified
    // ie: <textarea> elements depend on the editableInput event to stay synchronized
    this.base.checkContentChanged();
  },

  // 파란색 함수는 이미 효과가 적용된 text 를 select 했을 때 
  // 버튼이 눌러진 모습을 표현하기 위한 것이다.
  isAlreadyApplied: function (node) {
    return node.nodeName.toLowerCase() === 'mark';
  },

  isActive: function () {
    return this.button.classList.contains('medium-editor-button-active');
  },

  setInactive: function () {
    this.button.classList.remove('medium-editor-button-active');
  },

  setActive: function () {
    this.button.classList.add('medium-editor-button-active');
  }
});

See Also

1. Introduction - Slate

References

1. medium-editor/src/js/extensions at master · yabwe/medium-editor · GitHub
2. GitHub - yabwe/medium-editor-tables: Tables extension for MediumEditor