Vue CDN环境下如何从Froala Editor获取数据并发送至服务器

1. 确保正确引入资源 #

在HTML中按顺序引入Vue、Froala Editor核心文件以及Vue适配器：

<!-- Vue CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- Froala Editor 样式 -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@4.1.0/css/froala_editor.pkgd.min.css" rel="stylesheet">
<!-- Froala Editor 核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.1.0/js/froala_editor.pkgd.min.js"></script>
<!-- Froala-Vue 适配器 -->
<script src="https://cdn.jsdelivr.net/npm/vue-froala-wysiwyg@2.9.3/dist/vue-froala.js"></script>

2. 模板中添加编辑器与提交按钮 #

给编辑器添加ref属性，方便后续获取实例：

<div id="app">
  <froala-editor ref="froalaEditor"></froala-editor>
  <button @click="submitToServer">提交内容</button>
</div>

3. 编写Vue实例逻辑 #

通过ref获取编辑器实例，调用getHTML()（或getText()）获取内容，再通过fetch或axios发送到服务器：

new Vue({
  el: '#app',
  methods: {
    submitToServer() {
      // 获取编辑器的HTML内容
      const editorContent = this.$refs.froalaEditor.editor.getHTML();
      // 若需要纯文本，改用：this.$refs.froalaEditor.editor.getText();

      // 发送POST请求到服务器
      fetch('/your-server-api', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: editorContent })
      })
      .then(res => res.json())
      .then(result => {
        console.log('提交成功:', result);
        // 这里可添加成功后的提示或页面跳转逻辑
      })
      .catch(err => {
        console.error('提交失败:', err);
      });
    }
  }
});

额外：监听内容实时变化 #

如果需要实时获取编辑器内容，可监听contentChanged事件：

<!-- 修改模板中的编辑器标签 -->
<froala-editor ref="froalaEditor" @froalaEditor.contentChanged="onContentChange"></froala-editor>

// 在Vue实例的methods中添加方法
onContentChange() {
  const currentContent = this.$refs.froalaEditor.editor.getHTML();
  console.log('当前编辑器内容:', currentContent);
}

Vue 3 适配说明 #

如果使用Vue 3 CDN，需调整实例创建方式与ref获取逻辑：

const { createApp, ref } = Vue;

createApp({
  setup() {
    const froalaEditor = ref(null);

    const submitToServer = () => {
      const content = froalaEditor.value.editor.getHTML();
      // 后续请求逻辑同Vue 2
    };

    return { froalaEditor, submitToServer };
  }
}).mount('#app');

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