如何在TinyMCE和Markdown内容中添加样式

时间:2024-04-02 08:29:08

当然,它远非完美,但它提供了更清晰的文本视图,并且易于导出为HTML

许多作家更喜欢在Markdown中工作,因为它是一种更简单的语言,具有较少的攀登障碍。

但是,使用wysiwyg.css库 ,您可以立即拥有一个充满活力的文档

不幸的是,默认的Markdown样式通常很无聊。

这个免费CSS库将您的所有基本TinyMCE或Markdown内容转换为格式化的,易于阅读HTML块

只需将生成的内容包装到带有.wysiwyg类的div中,就可以完成工作。

您无需了解任何复杂HTML / CSS即可使用此插件。

真正的困难是构建一个将这一过程自动化的应用程序,或者将该库添加到用户管理面板的后端。

但是,可能性是无限的,如果您希望将内容从Markdown导出到HTML ,甚至可以将其用于本地编写工作

如何在TinyMCE和Markdown内容中添加样式

如果您想签出,则在GitHub存储库中完整列表

这包括所有标题,列表,链接,前置/代码标签,图形,甚至是半模糊标签,例如<sup><abbr>

默认情况下,此CSS库支持所有可以想到的主要HTML标签

因此,您可以将wysiwyg.css的所有优点与您自己的字体选择混合使用

如果定义自己的印刷样式,这些样式甚至可以重写样式表中的默认设置

只需在本地下载副本或使用npm install wysiwyg.css 直接将其 npm install wysiwyg.css

该库也很容易设置。

它只会使用.wysiwyg类将容器中的内容作为目标,因此此类应包装所需的任何容器。

从那里,您只需将CSS文件包含在文档头中,然后运行它即可。

如果您有关于新更新的建议或想法,请随时与创建者Jeremy Thomas在其Twitter页面@jgthms分享

该库仍会每隔半更新一次 ,因此您可以在GitHub主仓库中 找到最新更新


翻译自: https://www.hongkiat.com/blog/wysiwyg-css/