TinyMCE をインストール
yarn add tinymce –dev
Vueコンポーネント作成
- とりあえず basic example のまま
- SPAはやっていないのでformで使える形にしています
./resources/assets/js/components/TinyMCE.vue
<template>
<textarea :id="name" :name="name">{{body}}</textarea>
</template>
<script>
export default {
props: ['name', 'body'],
mounted: function() {
tinymce.init({
selector: 'textarea#' + this.name,
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
});
}
}
</script>
./resources/assets/js/app.js
...
Vue.component('tinymce', require('./components/TinyMCE.vue'));
...
./resources/views/sample.blade.php
...
<tinymce name="description" body="デフォルト値" />
...
js/cssの参照設定
./resources/assets/js/bootstrap.js
window.tinymce = require('tinymce/tinymce');
// A theme is also required
require('tinymce/themes/modern/theme');
// Any plugins you want to use has to be imported
require('tinymce/plugins/advlist');
require('tinymce/plugins/autolink');
require('tinymce/plugins/lists');
require('tinymce/plugins/link');
require('tinymce/plugins/image');
require('tinymce/plugins/charmap');
require('tinymce/plugins/print');
require('tinymce/plugins/preview');
require('tinymce/plugins/anchor');
require('tinymce/plugins/searchreplace');
require('tinymce/plugins/visualblocks');
require('tinymce/plugins/code');
require('tinymce/plugins/fullscreen');
require('tinymce/plugins/insertdatetime');
require('tinymce/plugins/media');
require('tinymce/plugins/table');
require('tinymce/plugins/contextmenu');
require('tinymce/plugins/paste');
require('tinymce/plugins/code');
- TinyMCE CSS配置
cp -r node_modules/tinymce/skins public/js/skins
compile
- 開発中は
yarn run watch
画像アップロード対応
- tinymce.init にオプション追加
images_upload_url: 'postAcceptor.php',
- postAcceptor.php をサーバに配置
- postAcceptor.php を参考にLaravelのコントローラを作成
- これできたら記事アップデートします