ウェブページに Vue.js を使って動的にテキストエリアを追加し、TinyMCEを適用しようとしています。
テキストエリアの内容は v-model を使って読み書きできるようにしているのですが、TinyMCE を有効にした後でテキストエリアの内容を読み取ろうとしても空(変更前の初期値)になってしまいます。
TinyMCE適用前のテキストエリアの値が <textarea>Hello</textarea>
の場合は「Hello」が取得されますが、TinyMCE適用後に文字をいくら編集しても得られる値は「Hello」のままになっていました。
TinyMCEの挙動を見る限りもともとの textarea は display: none
で隠されておりフォームの onsubmit あたりのタイミングでエディタの入力内容を隠れている本来のテキストエリアにコピーするという流れのようです。
tinyMCE.triggerSave()
を使って隠れているテキストエリアに入力内容をコピーする事はできたのですが、Vue で得られる変数の内容は変化しませんでした。
display: none を開発者ツールで削除して直接テキストエリアを編集すれば Vue の変数は変化します。
どのようにすれば Vue から v-model で紐付けられたTinyMCEのテキストエリアの内容を取得できるのでしょうか?
ちなみにTinyMCE は Vue 以外からも利用するので import ではなく <script src="..."> で読み込んでいます。
TinyMCE のバージョンは 4.x 系です。
よろしくお願いいたします。
html
1<template> 2 <form v-on:submit.prevent="onSubmit"> 3 <textarea name="content" v-model="inputs.content"></textarea> 4 </form> 5</template>
javascript
1methods: { 2 onSubmit: function(event){ 3 tinymce.triggerSave(); 4 console.log(this.inputs.content); 5 } 6}
回答2件
あなたの回答
tips
プレビュー