文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将TinyMCE编辑器的文本设置为中心对齐？

问如何将TinyMCE编辑器的文本设置为中心对齐？
EN

Stack Overflow用户

提问于 2021-03-02 23:10:42

回答 2查看 1.2K关注 0票数 0

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

下面是TinyMCE init代码：

<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;
}

css

wordpress

function

tinymce

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-03 14:47:48

一旦您有了要用于此目的的CSS，就可以使用content_css或content_style配置选项在TinyMCE中将适当的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，但在我的测试中，它确实将所有文本集中在编辑器中。

票数 1

Stack Overflow用户

发布于 2021-05-24 12:56:34

将下面的样式放到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>']
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66448444

复制

相似问题

问如何将TinyMCE编辑器的文本设置为中心对齐？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将TinyMCE编辑器的文本设置为中心对齐？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将TinyMCE编辑器的文本设置为中心对齐？
EN