Question

我在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,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>
</vx-card>

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

Answer 1

<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

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

1 个答案: