質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TinyMCE

TinyMCEとはプラットフォーム独立型であるウェブベースのJavaScript/HTML WYSIWYGエディターです。Moxiecode Systems ABによってLGPLライセンス下でオープンソース化されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1519閲覧

VueからTinyMCEを使ったテキストエリアの内容が正しく取得できない

workr

総合スコア158

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TinyMCE

TinyMCEとはプラットフォーム独立型であるウェブベースのJavaScript/HTML WYSIWYGエディターです。Moxiecode Systems ABによってLGPLライセンス下でオープンソース化されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/04/16 01:54

編集2018/04/16 05:05

ウェブページに 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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

tinymce.triggerSave()を呼んだ後で隠れているテキストエリアに対して dispatchEvent() で input イベントを発生させると変更が反映されるようになりました。

投稿2018/04/16 07:08

workr

総合スコア158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

オフィシャルな方法は試されてみましたか?
https://github.com/tinymce/tinymce-vue

投稿2018/04/16 06:53

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問