Vue

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/@tinymce/[email protected]/lib/browser/tinymce-vue.js"></script>
<div id="app">
  <editor
    ref="editor"
    :api-key="apikey"
    :initialValue="initialValue"
    :init="init"
    ></editor>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
$ja = function(){
  return tinymce.addI18n('ja',{
"Redo": "\u3084\u308a\u76f4\u3057",
"Undo": "\u5143\u306b\u623b\u3059",
"Cut": "\u5207\u308a\u53d6\u308a",
"Copy": "\u30b3\u30d4\u30fc",
"Paste": "\u8cbc\u308a\u4ed8\u3051",
"Select all": "\u3059\u3079\u3066\u9078\u629e",
"New document": "\u65b0\u898f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8",
"Ok": "OK",
"Cancel": "\u53d6\u6d88",
"Visual aids": "\u8868\u306e\u67a0\u7dda\u3092\u70b9\u7dda\u3067\u8868\u793a",
"Bold": "\u592a\u5b57",
"Italic": "\u659c\u4f53",
"Underline": "\u4e0b\u7dda",
"Strikethrough": "\u53d6\u6d88\u7dda",
"Superscript": "\u4e0a\u4ed8\u304d",
"Subscript": "\u4e0b\u4ed8\u304d",
"Clear formatting": "\u66f8\u5f0f\u3092\u30af\u30ea\u30a2",
"Align left": "\u5de6\u63c3\u3048",
"Align center": "\u4e2d\u592e\u63c3\u3048",
"Align right": "\u53f3\u63c3\u3048",
"Justify": "\u4e21\u7aef\u63c3\u3048",
"Bullet list": "\u7b87\u6761\u66f8\u304d",
"Numbered list": "\u756a\u53f7\u4ed8\u304d\u7b87\u6761\u66f8\u304d",
"Decrease indent": "\u30a4\u30f3\u30c7\u30f3\u30c8\u3092\u6e1b\u3089\u3059",
"Increase indent": "\u30a4\u30f3\u30c7\u30f3\u30c8\u3092\u5897\u3084\u3059",
"Close": "\u9589\u3058\u308b",
"Formats": "\u66f8\u5f0f",
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u304a\u4f7f\u3044\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u6a5f\u80fd\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002\u30ad\u30fc\u30dc\u30fc\u30c9\u306e\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\uff08Ctrl+X, Ctrl+C,...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('editor', Editor);

new Vue({
  el: '#app',
  data: {
    apikey:'n1wvc7iwdsqec5l7avvy9ob68x4hgtap0mboyvazo5v098t6',
    init: {
      language: 'ja',
      language_url : $ja,
      height: 500,
      menubar: false,
      table_toolbar: [
        'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
      ],
      plugins: [
        'print preview fullpage importcss searchreplace autolink \
        autosave save directionality visualblocks visualchars fullscreen image link media template codesample \
        table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount \
        imagetools textpattern noneditable help charmap quickbars  emoticons'
      ],
      toolbar:[
        'undo redo | formatselect | bold italic backcolor | \
        alignleft aligncenter alignright alignjustify | \
        bullist numlist outdent indent | removeformat | help table'
      ],
    },
    initialValue: '<p>This is the initial content of the editor</p>'
  }
});