如何使用 tailwind css 渲染 Ckeditor 5 文本？

Question

您好，我正在将 Ckeditor 与 vue 3 和 tailwind css 一起使用。但是富编辑器生成的文本呈现为 p 标签。没有像 ul ol 和 table 这样的标签在工作。

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { reactive } from 'vue';
export default {
    setup(){
        const state=reactive({
            editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    
                }
        })

        return {state}
    }
}
</script>

<template>
    <div id="vk">
        <ckeditor :editor="state.editor" v-model="state.editorData" :config="state.editorConfig"></ckeditor>
    </div>
    
        <div id="description" v-html="state.editorData">

        </div>
    
</template>

<style scoped>
    
</style>
``

Answer 1

试试这个包RSurya99/ckeditor-tailwind-reset，它对我有用。

所以，基本上你只是安装包

npm i ckeditor-tailwind-reset

并在您的应用中导入样式

@import 'ckeditor-tailwind-reset/ckeditor-tailwind-reset';