如何在拉拉中集成锡基乙烯基组分

Question

我试着把天鹅绒的部件整合到我的laravel项目中。这就是我迄今为止所做的：

安装了Vue软件包：

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

将此脚本包括在您的：

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

在资源/资产/js/组件中创建一个新的Vue组件Editor.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'
       }"
     />
   </div>
 </template>

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

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

在资源/资产/js/app.js中注册该组件：

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

已安装：

npm run dev

我不确定：

1. 如何使用刀片中的组件?如何将其集成到文本区域，以便只从刀片中提交表单并使用控制器中的输入？

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>