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

let menu = [{
  text: '注目ポイント1',
  value: 'attention1',
  onclick: function() {
    const attentionId = this.value();
    editor.insertContent(`<img id="${attentionId}" class="attention" width="30" height="30" src="dammy">`);
  }
}, {
  text: '注目ポイント2',
  value: 'attention2',
  onclick: function() {
    const attentionId = this.value();
    editor.insertContent(`<img id="${attentionId}" class="attention" width="30" height="30" src="dammy">`);
  }
}, {
  text: '注目ポイント3',
  value: 'attention3',
  onclick: function() {
    const attentionId = this.value();
    editor.insertContent(`<img id="${attentionId}" class="attention" width="30" height="30" src="dammy">`);
  }
}];

$('#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: menu
      });
    },
    init_instance_callback: editor => {
      $("iframe").contents().find("body").on("click", ".attention", function(e){
        e.stopPropagation();
    		alert($(this).attr('id'));
  		});
    }
  });
});

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