首页
话题
消息
手册
我的
返回介绍

Boilerplate content CSS

发布于 2019-05-06 字数1621 浏览 679 评论 0

There are advanced features in TinyMCE that require some CSS to be added to the page that displays the content produced by the editor. In general, to get as clean an output as possible from a rich text editor as well as to use some advanced features like captioned images, use CSS rather than inline styles to render correctly.

This Boilerplate CSS can be used to style these advanced elements. This CSS file can be used within the editor using the content_css option and also on your page where the saved content is presented.

/* Image captions using the HTML5 figure element */
figure.align-left {
    float: left;
}

figure.align-right {
    float: right;
}

figure.image {
    display: inline-block;
    border: 1px solid gray;
    margin: 0 2px 0 1px;
    background: #f5f2f0;
}

figure.image img {
    margin: 8px 8px 0 8px;
}

figure.image figcaption {
    margin: 6px 8px 6px 8px;
    text-align: center;
}

/*
 Alignment using classes rather than inline styles
 check out the "formats" option
*/
img.align-left {
    float: left;
}

img.align-right {
    float: right;
}

/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
    border: 1px solid gray;
}

.mce-toc h2 {
    margin: 4px;
}

.mce-toc li {
    list-style-type: none;
}

/*
 Removes margins on paragraphs,
 might be useful for mail clients
*/
/*p { margin: 0 }*/


/* Override CSS styles when within the editor only */
/* .mce-content-body figure {...} */

/* Override styles for the inline boundaries used within the editor */
/* .mce-content-body *[data-mce-selected="inline-boundary"] {...} */


您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!