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

TinyMCE をインストール

yarn add tinymce –dev

Vueコンポーネント作成

• とりあえず basic example のまま
  • https://www.tinymce.com/docs/demo/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の参照設定

• 参考
  • https://www.tinymce.com/docs/advanced/usage-with-module-loaders/#commonjsmodules
• js

/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 をサーバに配置
  • https://www.tinymce.com/docs/advanced/php-upload-handler/
• postAcceptor.php を参考にLaravelのコントローラを作成
  • これできたら記事アップデートします