将 ckeditor 数据转换为 html

Question

我正在构建一个 vue 应用程序，用户输入的数据存储在 mongo 数据库中。其中一个表单元素是 ckeditor。当用户输入数据时一切正常。
现在的问题是，当我进行 API 调用以获取用户输入的 ckeditor 文本时，我收到无法转换为 html 元素的 plein 字符串文本。

这是我的代码

<script>
export default {
  data() {
    return {
      courrierId: this.$route.params.detail,
      courrier: '',
    }
  },
  // i receive the full courrier object without a problem
  async created() {
    const courrier = await axios
      .post(`${baseUrl}getCourrierDetails/${this.courrierId}`)
      .then((response) => {
        this.courrier = response.data[0]
        console.log(response.data)
        return response.data
      })
      .catch((error) => ({ error: JSON.stringify(error) }))
  },
}
</script>

这是我从 DB 收到的快递对象

我想做的是在前端显示数据。除文本外，一切正常。这是代码

<div class="text-muted">
 <h5 class="font-size-16 mb-3">Pour</h5>
  <p class="mb-1">
    Nom : <strong>{{ this.courrier.Nom }}</strong>
  </p>
  <p class="mb-1">
    Prénom : <strong>{{ this.courrier.Prénom }}</strong>
  </p>
  <p class="mb-1">
    Alger le : <strong>{{ this.courrier.Date }}</strong>
  </p>
  <p class="mb-1">
    Age : <strong>{{ this.courrier.Age }}</strong>
  </p>
</div>

<h5 class="text-center">
  {{ this.courrier.Type }}
</h5>
{{ this.courrier.Text}}  <!-- this is where the problem reside -->
<div class="d-print-none mt-4">
 <div class="float-end">
     <a href="javascript:window.print()" class="btn btn-success waves-effect waves-light mr-1">
      <i class="fa fa-print"></i>
     </a>
     <a href="#" class="btn btn-primary w-md waves-effect waves-light">
      Send
    </a>
  </div>
</div>

这是输出

Answer 1

可以使用v-html指令输出真实的HTML:

<span v-html="this.courrier.Text"></span>

但是，真的不安全。你应该在 https://vuejs.org/v2/guide/syntax.html#Raw-HTML

参考 vue 的文档

将 ckeditor 数据转换为 html

Convert ckeditor Data to html

html

javascript

ckeditor

vue.js

nuxt.js