как интегрировать компоненты tinymce vue в laravel

Question

Я пытаюсь интегрировать компонент tinymce vue в мой проект laravel. это то, что я сделал до сих пор:

установил пакет Vue:

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

включите этот скрипт после:

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

Создайте новый Vue Редактор компонента. Vue внутри ресурсов / ресурсов / 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>

Зарегистрированный компонент в ресурсах / assets / js / app. js:

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

установил:

npm run dev

Я не уверен насчет:

1. как использовать компонент в моем блейде?
2. как интегрировать его в текстовое поле, чтобы я мог просто отправить форму с блейда и использовать входы в моем контроллере?

Answer 1

Единственное, что вам сейчас нужно, - это добавить реквизиты и скрытый ввод в ваш компонент редактора, чтобы он вел себя как ввод в форме блейда / vue.

в вашем компоненте:

<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>

А потом в вашем клинке:

 <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>