Question

我使用ASP.NET MVC项目，并且在这里有Tinymce插件编辑器

通过快捷方式格式选择字符或通过自定义按钮选择字符。

我该如何压盖？

Sample Photo

Answer 1

有几种方法可以实现，但是它们都需要一定程度的CSS。该页面显示了两个很好的示例：

https://css-tricks.com/snippets/css/drop-caps/

您可以在TinyMCE中使用style_formats来允许人们将类应用于文本。您可以使用content_css将CSS传递到编辑器，然后编辑器将根据所应用的类根据需要呈现该内容。

Answer 2

您可以通过用<span class="drop-cap">包装第一个字母来实现。或者，将<span class="drop-cap drop-cap-reversed">用于反色。

.drop-cap {
    float: left;
    padding: 5px;
    margin-right: 5px;
    font-family: Georgia;
    font-size: 60px;
    line-height: 50px;
    color: #263238;
}
.drop-cap-reversed {
    color: #fff;
    background-color: #263238;
}

<html>
<head>
</head>
<body>
<p>
<span class="drop-cap">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis semat nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Vestibulum lacinia arcueget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus antedapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Sed dignissim lacinia nunc.sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Vestibulum lacinia.
</p>
<span class="drop-cap drop-cap-reversed">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis semat nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Vestibulum lacinia arcueget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus antedapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Sed dignissim lacinia nunc.sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Vestibulum lacinia.
</p>
</body>
</html>

如何在Tinymce编辑器中设置首字母大写？

2 个答案: