vue2レンダリングでtinymceを導入

1年 ago
綾乃, 一希
1 minute

Vue2でTinyMCEをインポートするには、以下の手順に従ってください。

  1. TinyMCEの依存関係をインストールする：
npm install tinymce
  1. TinyMCEを利用するコンポーネントでは、TinyMCEをインポートします。
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/print';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/code';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/help';
  1. 乗り込んだ
mounted() {
tinymce.init({
selector: '#myEditor',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste help'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
}

上述のコードでは、よく使うプラグインやツールバーボタンを使用しているが、必要に応じてカスタマイズできる。

  1. beforeDestroy
beforeDestroy() {
tinymce.remove('#myEditor');
}
  1. コンポーネントのテンプレート内に、TinyMCEエディターを表示するための要素を追加する：
<template>
<div>
<textarea id="myEditor"></textarea>
</div>
</template>

これで、Vue2 で TinyMCE エディターを使用できるようになりました。上記の例の ‘#myEditor’ セレクターは、テンプレートで使用する ID と一致するようにしてください。

bannerAds