1

我正在使用 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>

无论我是否提供存储内容道具，页面上的编辑器都不会呈现任何内容。它只显示一个空编辑器。但是，在检查时，隐藏的输入确实会在页面上显示存储的内容（或“空白”）。

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

只要我在框中写入任何内容，“空白”值就会被覆盖。

有什么想法吗？

4

1 回答 1

1

我尝试了以下方法，当创建组件时，我手动将值添加到 trix innerHTML hoppefully 可以帮助您解决问题

<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>
于 2020-09-29T14:01:50.893 回答