如何在 Tinymce 编辑器中使用首字下沉？答案

【问题标题】：How can I do drop caps in Tinymce Editor?如何在 Tinymce 编辑器中使用首字下沉？
【发布时间】：2018-12-01 05:15:45
【问题描述】：

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

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

我该怎么做大写字母？

Sample Photo

【问题讨论】：

标签： tinymce editor tinymce-4 rich-text-editor

【解决方案1】：

您可以通过用<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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

FİDDLE 示例在这里可行吗？