如何在 Tinymce Editor 中设置首字下沉？

Question

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

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

我该怎么做首字下沉？

Sample Photo

Answer 1

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

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

您可以在 TinyMCE 中使用 style_formats 来允许人们将 class 应用于文本。您可以使用 content_css 将 CSS 传递给编辑器，然后编辑器将根据应用的 class.

呈现您想要的内容

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 Editor 中设置首字下沉？

How can I do drop caps in Tinymce Editor?

tinymce

editor

rich-text-editor

tinymce-4