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

【问题标题】：CKEditor 5 - Why h2 tags look like p tags?CKEditor 5 - 为什么 h2 标签看起来像 p 标签？
【发布时间】：2021-05-01 04:35:34
【问题描述】：

在我的项目（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 标签而且我不喜欢它，当我选择 h2 选项时如何使文本看起来像 h2？我已经尝试阅读documentation ( Quick start )，但仍然没有找到正确的解决方案

【问题讨论】：

标签： laravel vuejs2 ckeditor wysiwyg rich-text-editor

【解决方案1】：

那是因为您使用的是 tailwindcss 并且它会转义 H 标签。你可以添加

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

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

【讨论】：