how to integrate tinymce vue component in laravel

user_12776032 0
Viewed 1722

I'm trying to integrate tinymce vue component to my laravel project. this is what i did so far:

installed the Vue package:

$ npm install --save @tinymce/tinymce-vue

include this script after your :

<script src="/path/to/tinymce.min.js"></script>

Create a new Vue component Editor.Vue within resources/assets/js/components:

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   </div>
 </template>

 <script>
 import Editor from '@tinymce/tinymce-vue'

 export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
 </script>

Registered the component in resources/assets/js/app.js:

Vue.component('editor', require('./components/Editor.vue'));

installed it: 

npm run dev

I'm not sure about:

  1. how do I use the component in my blade?
  2. how do I integrate it into a textarea so I can just submit the form from the blade and use the inputs in my controller?
laravel vue.js tinymce
1 Answers

The only thing you need now is to add props and hidden input to you editor component so it behaves like input in your blade/vue form.

in your component:

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   <input id="content" type="hidden" :name="inputname" v-model="content" />

   </div>
 </template>

 <script>
 import Editor from '@tinymce/tinymce-vue'

 export default {
   props: ["inputvalue", "inputname"],
   name: 'app',
   components: {
     'editor': Editor
   },
   data() {
    return {
     content: this.inputvalue
    }
   }
 }
 </script>

And then in your blade:

 <form method="POST" action="{{route('news.update',$news->id)}}" enctype="multipart/form-data">
   @csrf
   @method('PATCH')
  <editor inputname="body" inputvalue="{{$news->body}}"></editor>
  <button type="submit" class="btn btn-primary">Save</button>
 </form>
user_79093840
Related