TinyMCE

TinyMCEのテスト

by asuma igarashi

HTML

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<div id='text'></div>
<button id='edit'>編集</button>
<button id='save'>保存</button>

CSS

#text {
  width: 500px;
  height: 300px;
  border: 1px solid gray;
}

JavaScript

$('#edit').on('click', () => {
  tinymce.init({
    selector:'#text',
    height: 300,
    width: 500,
    language: 'ja',
    menubar: false,
    statusbar: false,
    plugins: 'print preview powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat | attention',
    setup: editor => {
      editor.addButton('attention', {
        type: 'splitbutton',
        text: 'ちゅうもくぽいんと',
        icon: false,
        menu: [{
          text: '注目ポイント1',
          value: 'attention1',
          onclick: function() {
            const attentionId = this.value();
            editor.insertContent(`<span id="${attentionId}" class="attention" style="background:gray;">1</span>`);
          }
        }, {
          text: '注目ポイント2',
          value: 'attention2',
          onclick: function() {
            const attentionId = this.value();
            editor.insertContent(`<span id="${attentionId}" class="attention" style="background:gray;">2</span>`);
          }
        }, {
          text: '注目ポイント3',
          value: 'attention3',
          onclick: function() {
            const attentionId = this.value();
            editor.insertContent(`<span id="${attentionId}" class="attention" style="background:gray;">3</span>`);
          }
        }]
      });
    },
    init_instance_callback: editor => {
      $("iframe").contents().find("body").on("click", ".attention", function(e){
        alert($(this).attr('id'));
      });
    }
  });
});

$('#save').on('click', () => {
  tinymce.remove('#text');
});