内联编辑器-禁用编辑器并显示HTML /渲染内容Vue

如何解决内联编辑器-禁用编辑器并显示HTML /渲染内容Vue

我在Vue中使用ckeditor5。在我的Vuex商店中，我具有以下属性：

const state = {
  EditMode: false,}

在具有权限的用户单击按钮时，我修改了Vuex存储。如果为EditMode: true，我想显示嵌入式编辑器。否则，显示原始HTML editorData（用户无权编辑，或者未处于编辑模式）。我在下面这样做：

<template>
    <vx-card :title="editorName" v-if="this.$store.state.EditMode">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </vx-card>
    <vx-card :title="editorName" v-else>
        <div v-html="editorData"></div>
    </vx-card>
</template>

<script>
    import InlineEditor from '@ckeditor/ckeditor5-build-inline'

    export default {
        name: "RichTextEditor",props: {
            editorName: {
                type: String,required: true,},data() {
            return {
                loaded: false,time: null,timeElapsedSinceEdit: 0,editor: InlineEditor,editorData: 'New entry!',editorConfig: {
                    toolbar: {
                        items: [
                            '|','heading','fontFamily','fontSize','fontColor','bold','underline','italic','alignment','link','highlight','superscript','subscript','|','indent','outdent','blockQuote','horizontalLine','imageUpload','insertTable','mediaEmbed','undo','redo'
                        ]
                    },language: 'en',image: {
                        toolbar: [
                            'imageTextAlternative','imageStyle:full','imageStyle:side'
                        ]
                    },table: {
                        contentToolbar: [
                            'tableColumn','tableRow','mergeTableCells','tableCellProperties','tableProperties'
                        ]
                    },}
        },// Below code is situation-specific and not completely relevant
        watch: {
            editorData: function() {
                if (this.loaded) {
                    this.upsertData()
                }
            }
        },methods: {
            async pollData() {
                await
                    this.$http.get('/api/rte/' + this.editorName)
                        .then((response) => {
                            this.editorData = response.data.content
                        })
                        .catch((error) => {
                            if (window.environment == "production") {
                                location.href = 'pages/error-500/'
                            } else {
                                console.log(error.stack)
                            }
                        })

                this.loaded = true;
            },async upsertData() {
                console.log('up')
                await
                    this.$http.post('/api/rte/' + this.editorName + '/upsert',{
                        data: this.editorData,})
                        .then((response) => {
                            this.$vs.notify({
                                title: 'Action Completed',text: response.data.message,color: 'success',position: 'top-right'})
                        })
                        .catch((error) => {
                            if (window.environment == "production") {
                                location.href = 'pages/error-500/'
                            } else {
                                console.log(error)
                            }
                        })
            },created() {
            this.pollData();
        },}
</script>

这有效，但是v-html（大小和居中）不支持嵌入式样式。如果为this.$store.state.EditMode: false，则会得到以下输出：

如果this.$store.state.EditMode: true是我在嵌入式编辑器中得到的（如预期）。

原始HTML（调用editorData之后的pollData()属性）

<figure class="image image_resized" style="width:25.51%;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTRJO0xRohucbxcjlRoiRaw2cWYTbilYch5NQ&amp;usqp=CAU" alt="Free clipart megaphone announcement public domain vectors - Clipartix"></figure><h2 style="text-align:center;"><span style="color:hsl(30,75%,60%);"><strong>We have a new Intranet!</strong></span></h2><p style="text-align:center;"><a href="https://www.challengerunner.com/enroll/1e6738-2g5q">Summer / Fall Wellness Challenge Link</a></p>

研究表明，Vue的v-html不尊重范围样式。我不完全确定如何将其应用于内联样式。为了测试输出，我用原始HTML替换了else，并获得了与使用v-html时相同的视觉输出：

<vx-card :title="editorName" v-else>
    <figure class="image image_resized" style="width:25.51%;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTRJO0xRohucbxcjlRoiRaw2cWYTbilYch5NQ&amp;usqp=CAU" alt="Free clipart megaphone announcement public domain vectors - Clipartix"></figure><h2 style="text-align:center;"><span style="color:hsl(30,60%);"><strong>We have a new Intranet!</strong></span></h2><p style="text-align:center;"><a href="https://www.challengerunner.com/enroll/1e6738-2g5q">Summer / Fall Wellness Challenge Link</a></p>
</vx-card>

禁用内联编辑器并保持视觉一致性的正确方法是什么？

解决方法

<template>
    <vx-card :title="editorName" v-if="loaded">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :readonly="editorDisabled" :disabled="editorDisabled" ></ckeditor>
    </vx-card>
</template>

//...
        watch:{
            '$store.state.EditMode'(value,oldValue) {
                if(value) {
                    this.editorDisabled = false;
                } else {
                    this.editorDisabled = true;
                }
            },},//...

问题在这里回答：

https://github.com/ckeditor/ckeditor5-vue/issues/154