Vue.jsでtinymce-vueを使ってv-modelをaxiosでpost

問題:TinyMCEのTextareaをVue.jsのv-modelで取得してaxiosでpostしようとしたが上手くいかない。
->TinyMCEでVue.jsを使えるようにできるパッケージ[tinymce-vue]があるらしい

まず、Vue.jsでのtinymce-vueの使い方のテスト。

$ npm install –dev @tinymce/tinymce-vue

/node_modules/@tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js
の 「tinymce-vue.min.js」を任意の場所(tinymce-vue/)に移動

tinymce-vue.min.jsを読み込んで、後はTinyMCEのQuick Guideの通りに書いてみる。

    <h1>TinyMCEテスト</h1>
    <form method="post" action="confirm.php">
    <div id="app">
        <editor
          api-key="no-api-key"
          :init="{
            heigt: 500,
            menubar: false,
            plugins: &#91;
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             &#93;,
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help'
          }"
          :other_options="other_options"
          v-model="message"
        />
    </div>
    <input type="submit" value="送信">
    </form>
<script src="tinymce-vue/tinymce-vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el: '#app',
    components: {
        'editor': Editor
        
    },
    data: {
        message: 'hello!',
        other_options: {
            language_url: 'tinymce-vue/ja.js'
        }
    },
})
</script>

あれ？　v-modelは上手くいってる？　other_optionsでlanguage_urlを指定しているけど、これは上手くいってない？？

あ、optionではなく、:initの方に書いたらlanguage_urlもできた。

<editor
          api-key="no-api-key"
          :init="{
            heigt: 500,
            menubar: false,
            language: 'ja',
            language_url: 'js/tinymce/langs/ja.js',
            plugins: &#91;
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             &#93;,
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help',
            
          }"
          v-model="message"
        />

これを実装してテスト
VueでTinyMCE使えないとなり一瞬諦めかけましたが、一つ一つ公式のチュートリアル、Githubからクリアーしていくと、意外と簡単に行けました。
やっぱり入力フォームに絵文字がないとね🙋‍♂️