7最高のWYSIWYGHTMLエディターオープンソース

コードエディタには、単純なテキストベースのエディタとWYSIWYG（表示されるものが得られるもの）の2種類があります。前回の記事では 、コードを手動で入力するのに最適なオープンソースHTMLエディターのいくつかについて説明しました。テキストベースのHTMLエディタには問題はありませんが、それでも昔ながらの方法です。そこで、WYSIWYG HTMLエディターのオープンソースが登場します。WYSIWYGHTMLエディターは、プログラミングの知識がなくてもWebサイトを構築するための視覚ベースのオプションを提供します（  Wix  Adを思い出してください。これはwizzy-sigです）。

WYSIWYG HTMLエディターには、テキストベースのエディターに比べていくつかの利点があります。まず、コーディング方法がわからなくても、WYSIWYGエディターを使用してWebサイトを構築できます。エディターでアイテムをドラッグアンドドロップするだけで、完了したらコードをコピーするだけです。ただし、優れたオープンソースのWYSIWYGHTMLエディターを見つけるのは面倒な作業になる可能性があります。これが私たちの出番です。

また読む： Googleを捨てたいときの50以上のオープンソースAndroidアプリ

最高のWYSIWYGHTMLエディターオープンソース

1.ペル

Pellは、おそらくこれまでに出会った中で最も小さく、最も単純���WYSIWYGエディターです。文字通り1.38kbのサイズです！

見出し、太字、斜体、リスト、引用符、リンク、画像など、すべての基本的な機能と形式を提供します。その他の使用可能なアクションには、インデント、上付き文字、下付き文字、およびフォント名とサイズが含まれます。Pellでの書き込みとフォーマットが完了すると、HTMLコード全体が出力され、Webサイトまたはページにコピーして貼り付けるだけで、準備が整います。

長所：

• 最小かつ最軽量のWYSIWYG
• 依存関係なし
• 簡単にカスタマイズ可能

短所：

• 派手なHTML編集はありません
• リンクを介した画像のみ

評決：
そのサイズを考慮すると、Pellは魅力的なパッケージを作成します。しかし、正直に言うと、限られた編集オプションでしか基本的なHTMLファイルを作成できません。したがって、非常に基本的な作業のオープンソースである高速で軽量のWYSIWYGエディターをお探しの場合は、必ずPellをチェックしてください。

ペルを取得

2. OpenWYSIWYG

OpenWYSIWYGは、完全にJavaScriptでコーディングされたクロスブラウザーのリッチテキストHTMLエディターです。数行のコードをコピーして貼り付けるだけで、OpenWYSIWYGの堅牢なWYSIWYGHTMLエディターに変えることができます。<p> <p>ドロップダウンメニューのUIと編集オプションは、他のテキストエディターと非常によく似ています。自宅にいるように感じるでしょう。すべての基本的なフォーマットオプションとは別に、OpenWYSIWYGは、選択可能な216のWebカラーを備えた拡張カラーピッカーと、考えられるすべてのオプションを備えた強力なテーブルフォーマットツールを備えています。</ p> <p> OpenWYSIWYGのもう1つの優れた点は、すべての視覚的なオプションに加えて、<strong>生のHTMLコードを表示</ strong>して、コード内で直接調整することができます。コーディングスキルを習得または更新したい場合に便利です。</ p> <p> <imgloading = "lazy" / p> <ul> <li>数年以内に更新されない</ li> </ ul> <p> <strong>評決：</ strong> <br> JavaScriptで記述されているため、OpenWYSIWYGHTMLエディターのオープンソースが機能するはずです。他のWebプログラミング言語で。Pellよりも少し強力なものをWebアプリケーションに組み込む場合は、これが最適なオプションです。</ p> <p> <strong> <a href = "http://www.openwebware.com/デモ "target =" _ blank "rel =" noopener noreferrer "> OpenWYSIWYGを入手</a> </ strong> </ p> <h3> 3。TinyMCE（Community Edition）</ h3> <p>リストにある次のオープンソースHTMLWYSIWYGエディターはTinyMCEです。また、完全にJavaScriptで記述されており、ほとんどのワードプロセッサと同様のUIとエクスペリエンスを提供します。これにより、ユーザーフレンドリーになります。</ p> <p> TinyMCE <a href="https://www.tiny.cloud/pricing/" target="_blank" rel="noopener noreferrer">は無料ではありません</a>が、CommunityEditionは無料でオープンソースのもの。テキスト、リスト、表の書式設定などのすべての基本的な編集オプションと、いくつかの画像編集オプションが付属しています。</ p> <p>開発者は、ユーザー数に応じてプレミアムモデルの価格を維持しています。プレミアム機能には、GoogleドライブとMicrosoft Azureのサポート、拡張機能、スペルとリンクのチェッカー、テクニカルサポートなどがあります。</ p> <p> <img load = "lazy" class = "penci-lazy border aligncenter wp-image- 34916 size-full "src =" https://techwiser.com/wp-content/uploads/2018/07/TinyMCE.jpg "data-src =" https：// techwiser。ユーザーフレンドリーなUIと多数の機能は、完全なパッケージです。最も機能豊富なWYSIWYGHTMLエディターのオープンソースが必要で、いくらかのお金を費やしても大丈夫な場合は、TinyMCEが最適です。また、Proモデルの1か月間の無料トライアルを提供しており、いつでもチェックアウトできます。</ p> <p> <strong> <a href = "https://www.tiny.cloud/docs/demo/full -featured / "target =" _ blank "rel =" noopener noreferrer "> TinyMCEデモを入手</a> </ strong> </ p> <h3> 4。Jodit </ h3> <p> Joditは、コードに埋め込んでページの編集を開始できる、もう1つの高速で軽量なWYSIWYGHTMLエディターのオープンソースエディターです。サイズは約100KBと非常に軽量で、完全にTypeScriptで記述されています。そのため、実行するために依存関係やライブラリは必要ありません。</ p> <p>画像用のドラッグアンドドロップインターフェイスも付属しています。リンクを介してYouTubeまたはVimeoビデオを添付したり、埋め込んだりすることもできます。Joditで私が気に入っているのは、<strong> ACEエディター</ strong>が標準で付属しており、ボタンを1つ押すだけで、実際のコードとプレビューモードを切り替えることができることです。</ p> <p > <img load = "lazy" class = "penci-lazy border aligncenter wp-image-34917 size-full" src = "https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" data-src = "https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" alt = "Joditユーザーインターフェース" width = "677" height = "394" data-srcset = "https ：//techwiser.com/wp-content/uploads/2018/07/Jodit.jpg 677w、https：//techwiser.com/wp-content/uploads/2018/07/Jodit-300x175。jpg 300w "sizes ="（max-width：677px）100vw、677px "> </ p> <div class =" e85e5af91879d860f8283fd1fb4949d1 "data-index =" 2 "style =" float：none; margin：0px 0 0px 0; text-align：center; "> <ins class =" adsbygoogle "style =" display：inline-block; width：336px; height：280px "data-ad-client =" ca-pub-3072677420592088 "data-ad-slot = "1324909417"> </ ins> </ div> <p> <strong>長所：</ strong> </ p> <ul> <li>軽量、ライブラリなし</ li> <li>ドラッグアンドドロップドロップ</ li> <li>箱から出してすぐにACEエディタ</ li> <li>テクニカルサポート（有料）</ li> </ ul> <p> <strong>評決：</ strong> <br> Jodit簡単なビジュアルWYSIWYGエディターと生のコードの編集の両方の長所を提供します。HTMLの知識が少なくともある程度ある場合は、Joditが最適なオプションかもしれません。</ p> <p> <a href = "https://xdsoft.net/jodit/play.html" target = "_blank" rel = "noopener noreferrer"> <strong> JoditPlaygroundを入手</ strong> </a> </ p> <h3> 5。Summernote </ h3> <p> Summernoteは、jQueryに基づいて構築され、Bootstrapに基づいた非常にシンプルなWYSIWYGエディターのオープンソースです。Bootstrapをサポートしているため、Bootswatchからエディターでサポートされているすべてのスタイルとテーマを使用できます。</ p> <p> WYSIWYG HTMLエディターのオープンソース自体は非常にクリーンで最小限のUIを備えており、編集したり、書式を追加したりすることもできます。必要に応じてオプション。Summernoteのエアモードを使用すると、ツールバー全体を非表示にして、ドキュメントをその場で編集できます。便利。また、すべての画像を自動的にbase64に変換できるため、画像の処理をまったく行う必要はありません。</ p> <p>私にとって、Summernoteの最も優れた点は、常に耳を傾けている開発者の勤勉なチームです。コミュニティと新機能の追加。例としては、プラグインのサポートや、ブートストラップを必要としないライトバージョンまたはバニラバージョンのSummernoteがあります。</ p> <p> <img load = "lazy" class = "penci-lazy border aligncenter wp-image-34918 size-full "src =" https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg "data-src =" https://techwiser.com/wp-content/uploads/2018/07/Summernote .jpg "alt =" Summernoteビジュアルエディター "width =" 677 "height =" 441 "data-srcset =" https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg 677w、Summernoteはチェックアウトする価値があります。</ p> <p> <strong> <a href="https://summernote.org/" target="_blank" rel="noopenernoreferrer">サマーノートデモを入手</a> </ strong> </ p> <h3> 6。Froala </ h3> <p> Froalaは、JavaScriptで記述された美しいWYSIWYGHTMLエディターのオープンソースです。これはこのリストで最も人気のあるツールの1つであり、開発者に人気があるのは、その簡単な統合とすっきりとしたデザインに起因する可能性があります。</ p> <p> Froalaはそれ自体が非常に強力なエディターであり、無数のプラグインには同じように増加しました。それらのいくつかには、高度な画像エディタ、絵文字、スペルチェッカーが含まれており、独自のプラグインを作成することも簡単です。すべてのツールには、非常に便利なインラインエディタからもアクセスできます。</ p> <p> TinyMCEと同様に、<a href="https://www.froala.com/wysiwyg-editor/pricing"> Froalaにはさまざまな種類があります</a>が、無料版でも十分な効果があります。唯一の違いは、完全なソースコードと技術サポートを利用できないことです。</ p> <p> <img load = "lazy" class = "penci-lazy border aligncenter wp-image-34919 size-full" src = "https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg" data-src = "https://techwiser.com/wp-content/uploads/2018/07/Froala jpg "alt =" Froala WYSIWYGHTMLエディターオープンソース "width =" 677 "height =" 394 "data-srcset =" https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg 677w、 https://techwiser.com/wp-content/uploads/2018/07/Froala-300x175.jpg 300w "sizes ="（max-width：> <strong>フロアラを入手</ strong> </a> </ p> <h3> 7。CKEditor </ h3> <p> CKEditorは、美しくデザインされたWYSIWYGHTMLエディターのオープンソースとしてユーザーに非常に人気があります。わかりやすいレイアウトでHTMLを学習するのに役立つ21k以上のテストが付属しています。詳細なドキュメントは、スキルをさらに磨くのに役立ちます。テクノロジー業界の著名人の一部はそれを信頼しています。</ p> <p>各ファイルの著作権表示をそのままにして、CKEditorインストールフォルダにあるLICENSE.mdファイルを削除しないようにする必要があることに注意してください。これは欠点ではありません。特に、見返りとして多くの価値を得る場合はそうです。</ p> <p>プラグイン、@メンション、絵文字、レガシーブラウザ、さらにはオートコンプリートもサポートされているため、時間を大幅に節約できます。</ p> p> <p> <img load = "lazy" p> <strong>長所：</ strong> </ p> <ul> <li>詳細なドキュメント、テスト、質問</ li> <li>協力と@メンション</ li> <li>オートコンプリート</ li> </ ul> <p> <strong>短所：</ strong> </ p> <ul> <li>ライセンスファイルを保持する</ li> </ ul> <p> <strong> <a href = "https： //ckeditor.com/ "target =" _ blank "rel =" noopener noreferrer "> CKEditorを入手</a> </ strong> </ p> <p> <strong>名誉ある言及：</ strong> </ p> <p> 1。<a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer"> MediumEditor </a>は、Medium.com用のインラインWYSIWYGエディターのオープンソースクローンです。 。とてもシンプルです、軽量で、依存関係がありません。それほど強力ではありませんが、テキストまたはテキスト関連のドキュメントの優れたインライン編集ツールとして機能する可能性があります。</ p> <p> 2。Atomの<ahref = "https://atom.io/packages/atom-html-preview" target = "_ blank" rel = "noopener noreferrer"> HTMLプレビューパッケージ</a>を使用すると、プレビューペインを追加できます。 HTMLコードのライブプレビューを作成できます。これは、開発者にとって非常に役立ちます。これは間違いなく初心者向けではありませんが、すでにHTMLでプログラミングを行っている場合は、既存のワークフローに追加するのに最適なパッケージです。</ p> <h3>最高のWYSIWYGHTMLエディターオープンソース</ h3> <p> HTMLがまだ残っている間Webサイトを構築するためのより強力な方法と、はるかに複雑なものが可能です。WYSIWYGの編集者は、独自の場所を確保しています。コーディングを学ぶには、多くの時間とエネルギーの投資が必要であり、すべての人にとって意味がない場合があります。プログラミングの経験があり、学ぶ時間がない場合は、WYSIWYGHTMLエディターのオープンソースを使用することで絶対に逃げることができます。</ p> <p> <strong>また読む：</ strong> <a href = "https ：//techwiser.com/open-source-browser-for-android/ "> Android用の7つのベストオープンソースブラウザ（2018）</a> </ p> <div class =" e85e5af91879d860f8283fd1fb4949d1 "data-index =" 3 "style =" float：none; margin：0px 0 0px 0; text-align：center; "> <ins class =" adsbygoogle "style =" display：block; text-align：center; " data-ad-layout = "in-article" data-ad-format = "fluid" data-ad-client = " ca-pub-3072677420592088 "data-ad-slot =" 2804037256 "> </ ins> </ div> <div style =" font-size：0px; 高さ：0px; 行の高さ：0px; マージン：0; パディング：0; クリア：両方; "> </ div> <div class =" penci-single-link-pages "> </ div>