如何设置TinyMCE Editor的文本居中对齐？

Question

我正在努力使使用 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;
}

Answer 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，但在我的测试中，它确实使编辑器中的所有文本居中。

Answer 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>']
});

如何设置TinyMCE Editor的文本居中对齐？

How to Set Text of TinyMCE Editor to Center Align?

html

css

wordpress

tinymce

function