CKEditor 5 - 为什么 h2 标签看起来像 p 标签？

Question

我在为我的项目（VILT 堆栈）使用 CKEditor 5 时遇到问题

我可以这样描述问题：

这是我的 vue 文件：

<template>
    <app-layout>
        <ckeditor :editor="editor" @blur="onEditorInput" v-model="editorData" :config="editorConfig"></ckeditor>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        components: {
            AppLayout,
        },
        data() { 
            return {
                editor: ClassicEditor,
                editorData: '',
                editorConfig: {
                    // The configuration of the editor.
                }
            }
        },
        methods: {
            onEditorInput() {
                console.log(this.editorData);
            }
        }
    }
</script>

这是 app.js :

require('./bootstrap');

// Import modules...
import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
Vue.use( CKEditor );

const app = document.getElementById('app');

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

这里是 package.json 文件的内容：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.8.2",
        "@inertiajs/inertia-vue": "^0.5.4",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "autoprefixer": "^10.0.2",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "portal-vue": "^2.1.7",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^2.0.1",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^25.0.0",
        "@ckeditor/ckeditor5-vue2": "^1.0.5"
    }
}

所以您可以在控制台中看到它显示 h2，但它看起来像一个 p 标签，我不喜欢它，当我 select h2 选项时，如何使文本看起来像 h2？我已尝试阅读 documentation ( Quick start ) 但仍未找到正确的解决方案

Answer 1

那是因为您正在使用 tailwindcss 并且它转义了 H 标签。您可以添加

@layer 
     base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

到您的资源->css->app.css 文件，您将使它正常工作。

CKEditor 5 - 为什么 h2 标签看起来像 p 标签？

CKEditor 5 - Why h2 tags look like p tags?

wysiwyg

rich-text-editor

ckeditor

laravel

vuejs2