Edited at

Laravel5.4 で TinyMCE を使ってみたメモ

More than 1 year has passed since last update.


TinyMCE をインストール

yarn add tinymce –dev


Vueコンポーネント作成


/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',