如何设置TinyMCE编辑器文本居中对齐?

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