如何在Laravel项目中集成TinyMCE Vue组件并实现表单提交

嘿，看起来你已经把TinyMCE Vue组件的基础集成工作搞定了，接下来我来帮你解决剩下的两个问题：

一、在Blade模板中使用这个组件 #

其实步骤很简单，你已经完成了组件注册和编译，只需要两步就能在Blade里用上它：

• 首先，确保在你的Blade模板末尾（一般是</body>标签之前）引入编译后的JS文件，Laravel的mix工具帮我们处理了资源路径，直接用：

<script src="{{ mix('js/app.js') }}"></script>

• 然后，找个合适的位置（必须放在Vue挂载的根容器里，默认是id="app"的div），直接写组件标签就行：

<div id="app">
    <!-- 这里就是你的TinyMCE编辑器 -->
    <editor></editor>
</div>

小提醒：如果你的Vue实例挂载的不是#app，记得把组件放到对应的容器里哦。

二、与textarea集成，实现表单提交并在控制器获取输入 #

要让编辑器的内容能通过传统的Blade表单提交到控制器，我们可以用Vue的双向绑定把编辑器内容同步到一个隐藏的textarea里，这样表单提交时就能正常获取到内容了：

第一步：调整你的Editor.vue组件，支持双向绑定 #

@tinymce/tinymce-vue组件本身是支持v-model的，但我们可以稍微调整组件，让它更适配Laravel的表单场景：

<template>
  <editor 
    api-key="no-api-key" 
    :value="editorContent"
    @input="handleInput"
    :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' 
    }" 
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'CustomEditor',
  components: {
    Editor
  },
  props: ['value'],
  data() {
    return {
      editorContent: this.value || ''
    }
  },
  methods: {
    handleInput(newVal) {
      this.editorContent = newVal
      this.$emit('input', newVal)
    }
  },
  watch: {
    value(newVal) {
      this.editorContent = newVal
    }
  }
}
</script>

第二步：在Blade表单中使用组件并同步到textarea #

在你的Blade表单里，把编辑器和隐藏的textarea绑定到同一个数据变量：

<form method="POST" action="{{ route('your.submit.route') }}">
    @csrf
    <div id="app">
        <!-- 你的TinyMCE编辑器，用v-model绑定内容 -->
        <editor v-model="formContent"></editor>
        <!-- 隐藏的textarea，名字对应你要在控制器获取的字段名 -->
        <textarea name="content" style="display: none;" v-model="formContent"></textarea>
    </div>
    <button type="submit">提交内容</button>
</form>

<!-- 初始化Vue实例，绑定数据 -->
<script>
new Vue({
    el: '#app',
    data() {
        return {
            formContent: ''
        }
    }
});
</script>

第三步：在控制器中获取内容 #

现在表单提交后，你就能在控制器里通过请求对象拿到编辑器的内容了：

public function store(Request $request)
{
    // 获取编辑器内容
    $content = $request->input('content');
    
    // 这里可以做你需要的操作，比如保存到数据库
    // Example: Post::create(['content' => $content]);
    
    return redirect()->back()->with('success', '内容提交成功！');
}

这样就完美实现了在Blade里使用TinyMCE编辑器，并且能通过传统表单提交获取内容啦。

内容的提问来源于stack exchange，提问作者tria