如何将 TinyMCE 编辑器的文本设置为居中对齐？答案

【问题标题】：How to Set Text of TinyMCE Editor to Center Align?如何将 TinyMCE 编辑器的文本设置为居中对齐？
【发布时间】：2021-03-02 23:10:42
【问题描述】：

我正在尝试使使用 TinyMCE 的文本编辑器默认使文本居中对齐。我尝试过执行命令，也尝试过链接到自定义 CSS，但两个选项都不起作用。我不确定我的设置函数是否写错了，我的自定义 css 是否没有到达正确的文件位置，或者自定义 css 是否没有连接到正确的元素。

这是 TinyMCE 的初始化代码：

<script type="text/javascript">
    
tinymce.init({
    selector: '#writeTitle',
    width : "1000",
    height: '80',
    //skin: 'oxide-dark',
    //content_css: 'https://headcanon.ca/wp-content/uploads/custom-css-js/70.css',
    menubar: false,
    statusbar: false,
    toolbar: false,
    setup: function (editor) {
        editor.on('init', function (e) {
           editor.execCommand('JustifyCenter', false);
           editor.execCommand('FontSize', '32px', false);
        });
        editor.on('init keydown change', function (e) {
           document.getElementById('data').innerText = editor.getContent();
        });
    },
    
    //
});
</script>

这是我一直在尝试的 CSS：

.mce-content-body {
    background-color: #444445!important;
    color:#FFF!important;
    text-align:center;
}

【问题讨论】：

您是否希望编辑器中的所有文本居中对齐？您只是希望初始内容居中对齐吗？当有人按下Enter 开始一个新的文本块时会发生什么？
是的，我只是想让所有文本居中对齐。关于当有人按下 Enter 键时，我打算尝试将其设置为设定的长度，但现在我只专注于文本对齐。

标签： html css wordpress function tinymce

【解决方案1】：

一旦您有了想要用于此目的的 CSS，您就可以使用 TinyMCE 中的 content_css 或 content_style 配置选项将适当的 CSS 传递给 TinyMCE。

这里是一个例子：https://fiddle.tiny.cloud/36haab

这使用以下 CSS：

    html, body {
        height: 100%;
    }

    html {
        display: table;
        margin: auto;
    }

    body {
        display: table-cell;
        vertical-align: middle;
    }

我并不是说这是唯一可以满足您需求的 CSS，但在我的测试中，它确实将编辑器中的所有文本居中。

【讨论】：

是的，这对我有用。即使这部分有效，content_css 仍然很烦人，但它确实适用于我不知道的 content_style。谢谢！

【解决方案2】：

将以下样式放入 list.css 文件

.mce-content-body ol[align="center"],
.mce-content-body ol li[align="center"],
.mce-content-body ul[align="center"],
.mce-content-body ul li[align="center"] {
    text-align: center;
}
.mce-content-body ol[align="left"],
.mce-content-body ol li[align="left"],
.mce-content-body ul[align="left"],
.mce-content-body ul li[align="left"] {
    text-align: left;
}
.mce-content-body ol[align="right"],
.mce-content-body ol li[align="right"],
.mce-content-body ul[align="right"],
.mce-content-body ul li[align="right"] {
    text-align: right;
}

然后在tinymce.init()函数上使用

tinymce.init({
    selector: '#tinymce-textarea',
    content_css: ['<strong>list.css</strong>']
});

【讨论】：