Trix 编辑器不呈现存储的内容

Question

我正在使用 Trix 编辑器并尝试在框中呈现一些存储的内容，但没有显示任何内容。我的 Trix 编辑器组件包装器：

<template>
  <div>
    <input type="hidden" :id="id" :name="name" :value="storedContent ? storedContent : 'blank'" />
    <trix-editor :input="id"></trix-editor>
  </div>
</template>

<script>
import Trix from "trix";

export default {
  props: ["id", "name", "storedContent"]
};
</script>

无论我是否提供 stored-content 属性，页面上的编辑器都不会呈现任何内容。它只显示一个空的编辑器。但是，在检查时，隐藏的输入确实在页面上显示了存储的内容（或 'blank'）。

<input id="job-full-desc" type="hidden" name="full_description" value="blank">

只要我在框中写下任何内容，'blank' 值就会被覆盖。

有什么想法吗？

Answer 1

我尝试了以下方法，在创建组件时我手动将值添加到 trix innerHTML 希望能帮到你，谢谢

<template>
    <div>
        <input :id="id" type="hidden" :name="name" :value="value">

        <trix-editor ref="trix" :input="id" :placeholder="placeholder" style="min-height:300px"></trix-editor>
    </div>
</template>

<script>
    import Trix from 'trix';
    import 'trix/dist/trix.css';
    export default {
        props: ['name', 'value', 'placeholder', 'shouldClear' , 'id'],
        mounted () {
            this.$refs.trix.innerHTML = this.value;
            console.log(this.$refs.trix.innerHTML);
        }
    };
</script>

Trix 编辑器不呈现存储的内容

Trix editor not rendering stored content

vue.js

trix