TinyMCEとマークダウンコンテンツにスタイルを追加する方法

多くの作家が好む マークダウンで働く それは登るのがより少ないハードルでより簡単な言語だからです。確かにそれは完璧には程遠いですが、それは提供しています あなたのテキストのよりきれいな見方 のしやすさで HTMLへのエクスポート.

残念ながら、デフォルトのMarkdownスタイルは通常かなり退屈です。しかし、 wysiwyg.cssライブラリ, あなたはできる 活気のある文書を持っている あっという間に.

この無料のCSSライブラリは、すべての基本的なTinyMCEまたはMarkdownコンテンツをに変換します。 フォーマットされた、読みやすいHTMLブロック.

このプラグインを使用するために複雑なHTML / CSSを知る必要はありません。単に 生成されたコンテンツをラップする クラスでdivに入る .WYSIWYG, そしてあなたはすべて設定済みです.

本当の難しさは、このプロセスを自動化するアプリを構築すること、またはユーザー管理パネルのためにこのライブラリをバックエンドに追加することです.

しかし、可能性は無限大です、そしてあなたもこれを使用することができます 地元の執筆活動のため コンテンツをエクスポートしたい場合 MarkdownからHTMLへ.

デフォルトでは、このCSSライブラリは 主要なすべてのHTMLタグをサポート 想像できます。これには、すべてのヘッダー、リスト、リンク、プレ/コードタグ、図、さらには次のような半わかりにくいタグも含まれます。 そして . あります 全リスト チェックアウトしたい場合はGitHubレポジトリに.

あなたがあなた自身の活版印刷スタイルを定義するならば、これらも可能です デフォルト設定を書き換える スタイルシート内だからあなたはwysiwyg.cssのすべての利点を得ることができます あなた自身のフォントの選択と混在.

ライブラリも設定が簡単ではありませんでした。ただ ローカルにコピーをダウンロードする または 直接引っ張る 使う npm install wysiwyg.css

そこから、あなただけ CSSファイルを含める あなたのドキュメントの頭の中で、それを実行させてください。コンテンツのみをターゲットにします クラスを持つコンテナの中 .WYSIWYG, だからこのクラスはあなたが望むどんなコンテナでもラップするべきです.

図書館はまだ 半頻繁に更新, だからあなたはできる 最近の更新を見つける メインのGitHubリポジトリにあります。そして、あなたが新しいアップデートのための提案やアイデアを持っているなら、彼のTwitterのページ@ jgthmsでクリエイターJeremy Thomasと共有して自由に感じます.