I am using Vue Tiptap with the Color extension. After an edit, I am getting the HTML and storing it in Firestore. However, the editor does not show bold or italic text when a color is also set. However, it does show up correctly in the HTML, which is fetched by another wesbite.

这里是我的编辑。

    <div class="editor">
        <div class="controls">
            <button @click="() => {
                editor?.chain().focus().toggleBold().run()
            }">
                &#119809;
            </button>
            <button @click="() => {
                editor?.chain().focus().toggleItalic().run()
            }">

                &#8520;

            </button>
            <VDropdown placement="top">
                <button>

                    &#127912;

                </button>
                <template #popper>
                    <div class="color-controls">
                        <div class="color-choices">

                            <div v-for="color in colors" :key="color"
                                @click="editor?.chain().focus().setColor(color).run()">
                                <div class="circle" :style="{ backgroundColor: color }"></div>

                            </div>
                        </div>
                        <button @click="editor?.chain().focus().unsetColor().run()">Remove Color</button>

                    </div>
                </template>
            </VDropdown>


        </div>
        <editor-content :editor="editor!" />
    </div>
</template>

<script setup lang="ts">
import { Color } from  @tiptap/extension-color ;
import { TextStyle } from  @tiptap/extension-text-style ;
import StarterKit from  @tiptap/starter-kit ;
import { EditorContent, useEditor } from  @tiptap/vue-3 ;

const colors = [
    "Red",
    "Orange",
    "Yellow",
    "Green",
    "Blue",
    "Indigo",
    "Violet",
    "Black",
    "White",
    "Gray",
    "Pink",
    "Brown",
    "Aqua",
    "Coral",
    "Lime",
    "Maroon",
    "Navy",
    "Olive",
    "Purple",
    "Teal"
];


Color.configure({
    types: [ textStyle ],
})

const props = defineProps({
    content: {
        type: String,
        required: true,
    },
    contentEditable: {
        type: Boolean,
        default: true,
    },


})

const emit = defineEmits(["update:content"])

const editor = useEditor({
    extensions: [
        StarterKit,
        TextStyle,
        Color,
    ],
    content: props.content,
    editable: props.contentEditable,
    onUpdate({ editor }) {
        emit( update:content , editor.getHTML())
    },
})


</script>

<style scoped>
strong span {
    font-weight: bold !important;
}


.color-controls {
    display: flex;
    flex-direction: column;
}

.color-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
}
</style>

在这次屏幕上,压缩字为黑体。 它显示了勇敢的姿态。 然后,我把颜色划入绿线,黑体没有显示。

在这一屏幕上,客户网站显示的是超文本。 它正确显示了黑色。

我需要编辑准确显示黑体和斜体,即使有颜色。

这里的一个例子是,在检查员中,有色和果敢的编辑超文本: