tinymce 格式化答案

【问题标题】：tinymce formattingtinymce 格式化
【发布时间】：2011-06-06 12:21:17
【问题描述】：

我正在使用以下代码块来格式化文本：

    'formats': {
        'format_code': {
            'block': 'pre',
            'styles': {
                'color': '#000000',
                'backgroundColor': '#f0f0f0',
                'fontFamily': 'monaco,consolas,courier new,monospace',
                'fontSize': '1.0em',
                'width': '80%',
                'minHeight': '5.0em',
                'maxHeight': '15.0em',
                'overflow': 'auto',
                'border': '1px solid #999999',
                'padding': '1.0em'
            }
        }

这个代码块是给我的。现在我想将其更改为使用 CSS 类。

谁能告诉我如何做到这一点。我对 tinyMCE 不熟悉。

【问题讨论】：

标签： css tinymce

【解决方案1】：

CSS 几乎相同。 camelCase 属性在 CSS 中以破折号分隔，并且必须引用包含空格的字体。

.myClassSelector {
    color:#000000;
    backgroundColor:#f0f0f0;
    font-family:monaco,consolas,"courier new",monospace;
    font-size:1em;
    width:80%;
    min-height:5em;
    max-height:15em;
    overflow:auto;
    border:1px solid #999999;
    padding:1em;
}

我假设您想将其添加到 TinyMCE 中的下拉 Styles 中。如果您想将其添加到 Format 下拉列表中，则需要不同的配置选项。

如果您想在下拉列表中添加新的样式，则需要将上面的 CSS 类规则放在 .css 文件和 configure TinyMCE 中，如下所示：

tinyMCE.init({
    theme:'advanced',
    content_css:'path/to/css/file',
    style_formats : [
        {title : 'My Style', block : 'div', classes : 'myClassSelector'}
    ]
});

【讨论】：