Contenteditableを使用するコンテンツエディター

モスクワで開催された最後のWeb Standards Daysで、Anton Nemtsevはcontenteditable属性を使用して、同じコンテンツを使用してページ上でコンテンツを直接編集するアイデアについて話しました。

グーグルに尋ねたところ、私はあなたがプロジェクトの1つに適用するのを試みることができる2人の非常に働くエディタを見つけました。

水銀エディター


水銀エディター

TinyMCEまたはCKEditorの類似物として位置付けますが、コンテンツの特定のブロックで使用するためにページに直接埋め込まれます。

デモは非常に魅力的に見えます-パネルがページの上部に表示され、編集可能なブロックがコンテンツで強調表示されます。

このサイトでは、エディターはRoRのgemとして機能しますが、RoRなしで使用する方法を説明するGithubのwikiプロジェクトへのリンクがあります。

Firefox 4以降、Chrome 10以降、Safari 5以降のサポートの宣言

アロハエディター




概念は同じです。編集可能な領域が強調表示され、それらをクリックすると、パネルにボタンが表示されます。

最初はMercury Editorよりも悪いように見えますが、機能を拡張する約20のプラグインがサイトで利用できます。たとえば、写真を挿入して属性を編集するためのプラグインです。

明示的にサポートされているブラウザーのバージョンは見つかりませんでしたが、Mercury Editorと同様に、FirefoxおよびIE9のWebkit +で動作することが経験的にわかりました。

コメントに基づく更新
NicEdit-彼が見ているときに彼を見ましたが、何らかの理由で彼のデモは私を感動させませんでした。 それはかなり注目に値しますが。

ImperaviのjQueryのビジュアルエディター 。 すてきなデザインのミニマルなエディター。 外見的には気に入っていますが、機能は豊富ではありませんが、十分です。

Best In Placeは、コンテンツのみを編集できるスーパーミニマリストエディターです。特定のパラメーターセットを持つフォームに以前に入力したデータを編集する必要がある場合に使用できます。

Source: https://habr.com/ru/post/J136599/


All Articles