medium editor
5.23.3
GitHubで最も成功したWysiWygテキストエディターの1つを維持するのを支援することに興味がある場合は、お知らせください！ （問題＃1503を参照）
これは、Medium.comインラインエディターツールバーのクローンです。
MediumEditorはVanilla JavaScriptを使用して書かれており、追加のフレームワークは必要ありません。
デモ：http：//yabwe.github.io/medium-editor/
NPM経由：
コンソールで実行： npm install medium-editor
バウアー経由：
bower install medium-editor
外部CDNを介して
最新バージョンの場合：
< script src =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >カスタムの場合：
< script src =" //cdn.jsdelivr.net/npm/[email protected]/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/[email protected]/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >手動インストール：
最新リリースをダウンロードし、メディアエディターのスタイルシートをページに添付してください。
DISTフォルダーにリンクする以下のファイルを以下に見つけます。 （./medium-editor/dist/...）
< link rel =" stylesheet " href =" css/medium-editor.css " > <!-- Core -->
< link rel =" stylesheet " href =" css/themes/default.css " > <!-- or any other theme -->次のステップは、編集者のスクリプトを参照することです
< script src =" js/medium-editor.js " > </ script >これで、新しい中編集オブジェクトをインスタンス化できます。
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >上記のコードは、.EDIBATIONクラスを持つすべての要素をHTML5編集可能なコンテンツに変換し、それらに中程度のエディターツールバーを追加します。
HTML要素のリストを渡すこともできます。
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; MediudEditorはTextareaもサポートしています。 Textarea要素を提供する場合、スクリプトはcontentEditable=trueを備えた新しいdivを作成し、textareaを非表示にし、textarea値をDiv HTMLコンテンツにリンクします。
人々は、さまざまなフレームワークや技術スタックと統合するために、メディアエディターを中心にラッパーを貢献しています。既存のラッパーのリストと、すでに中編集者向けに書かれている統合をご覧ください！
MediudEditorのさまざまなオプションのすべてのメディアエディターオプションのドキュメントを表示します。
中編集者をカスタマイズするオプションは、メディア編集者コンストラクターの2番目の引数として渡されます。例：
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 「fontawesome」。デフォルト： false buttonlabelsとして'fontawesome'を使用するには、すべてのアイコンが正しく表示されるようにページ上にあるFontawesome CSSのバージョン4.1.0が必要です
0falsefalsefalsefalsedocument.body{}truefalseMediudEditor用のツールバーは、ユーザーがテキストを選択するたびに自動的に表示される内蔵拡張機能として実装されます。ツールバーは、定義されたビルトインボタンのセットを任意のセットに保持できますが、拡張機能として渡されたカスタムボタンを保持することもできます。
ツールバーのオプションは、アウターオプションオブジェクトのメンバーであるオブジェクトとして渡されます。例：
var editor = new MediumEditor ( '.editable' , {
toolbar : {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection : true ,
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' , 'h2' , 'h3' , 'quote' ] ,
diffLeft : 0 ,
diffTop : - 10 ,
firstButtonClass : 'medium-editor-button-first' ,
lastButtonClass : 'medium-editor-button-last' ,
relativeContainer : null ,
standardizeSelectionStart : false ,
static : false ,
/* options which only apply when static is true */
align : 'center' ,
sticky : false ,
updateOnEmptySelection : false
}
} ) ;true['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']0-10'medium-editor-button-first''medium-editor-button-last'absoluteではなくrelative位置に配置されます。デフォルト： nullfalsefalse staticオプションが使用されている場合にのみ適用されるオプション：left | center | right -静的オプションがtrueの場合、これは中編集要素に対する静的ツールバーを整列させます。デフォルト： centertrueの場合、これにより、ページがスクロールしている間、ツールバーがビューポートに「固執」し、画面に表示されたままになります。デフォルト： falsetrueの場合、選択が崩壊した場合でも、ツールバーボタンの状態を更新することができます（選択がなく、カーソルだけ）。デフォルト： falseツールバーを無効にするには（Anchor-Preview拡張機能も無効にします）、 toolbarオプションの値をfalseに設定します。
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; ボタンの動作は、文字列の代わりにオブジェクトをボタンアレイに渡すことで変更できます。これにより、ボタンのデフォルト動作の一部をオーバーライドできます。次のオプションは、オーバーライドする可能性のあるボタンの基本的な部分の一部ですが、 MediumEditor.Extension.prototypeの一部は、これらのボタンオプションを介してオーバーライドできます。 （ボタンのソースコードをチェックして、すべてがオーバーライドできるものを確認してください）。
MediumEditor.execAction()に渡す引数。<b>または<strong>タグ内にある場合、テキストがすでに太字であることを示します。したがって、太字のtagnamesの配列は次のとおりです。 ['b', 'strong']useQueryStateがtrueに設定されている場合、これは使用されません。700または'bold'に設定された'font-weight'スタイルのプロパティを備えた要素内にある場合、テキストがすでに太字であることを示します。したがって、太字のスタイルオブジェクトは{ prop: 'font-weight', value: '700|bold' }です。useQueryStateがtrueに設定されている場合、これは使用されません。'|'によって分離できます）document.queryCommandState()メソッドを使用するかどうかを有効/無効にして、アクションが既に適用されているかどうかを判断します。アクションがすでに適用されている場合、ボタンはツールバーに「アクティブ」として表示されますdocument.queryCommandState('bold')を呼び出します。innerHTMLボタン内に配置します'fontawesome'に設定されている場合、ボタンのコンテンツに使用するinnerHTMLオーバーライドボタンの例（ここでは、目標は、それぞれ<h2>および<h3>タグをそれぞれ生成するH1およびH2ボタンを使用することにより、媒体を模倣することです）：
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [
'bold' ,
'italic' ,
{
name : 'h1' ,
action : 'append-h2' ,
aria : 'header type 1' ,
tagNames : [ 'h2' ] ,
contentDefault : '<b>H1</b>' ,
classList : [ 'custom-class-h1' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h1'
}
} ,
{
name : 'h2' ,
action : 'append-h3' ,
aria : 'header type 2' ,
tagNames : [ 'h3' ] ,
contentDefault : '<b>H2</b>' ,
classList : [ 'custom-class-h2' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h2'
}
} ,
'justifyCenter' ,
'quote' ,
'anchor'
]
}
} ) ;アンカープレビューは、ユーザーがエディターのリンク上にホバリングしているときに「ツールチップ」を自動的に表示するビルトイン拡張機能です。ツールチップはリンクのhrefを表示し、クリックするとツールバーにアンカー編集フォームを開きます。
アンカープレビュー「ツールチップ」のオプションは、外側のオプションオブジェクトのメンバーであるオブジェクトとして渡されます。例：
var editor = new MediumEditor ( '.editable' , {
anchorPreview : {
/* These are the default options for anchor preview,
if nothing is passed this is what it used */
hideDelay : 500 ,
previewValueSelector : 'a'
}
}
} ) ;500'a'falsetrueアンカープレビューを無効にするには、 anchorPreviewオプションの値をfalseに設定します。
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: falseオプションまたはdata-disable-toolbar属性）、Anchor-Previewが自動的に無効になります。プレースホルダーハンドラーは、エディターが空のときにプレースホルダーテキストを表示する組み込み拡張機能です。
プレースホルダーのオプションは、アウターオプションオブジェクトのメンバーであるオブジェクトとして渡されます。例：
var editor = new MediumEditor ( '.editable' , {
placeholder : {
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text : 'Type your text' ,
hideOnClick : true
}
} ) ;テキスト：プレースホルダーがfalsに設定されていない場合、空のコンテンツ誘導物のデフォルトのプレースホルダーを定義します。エディター要素にdata-placeholder属性を設定することにより、上書きできます。デフォルト： 'Type your text'
HideonClick ：フィールドが焦点を当てるとすぐにプレースホルダーが消えます。デフォルト： true 。タイプを開始した後にのみプレースホルダーを隠し、フィールドが空になったらすぐに再度表示するには、このオプションをfalseに設定します。
プレースホルダーを無効にするには、 placeholderオプションの値をfalseに設定します。
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;アンカーフォームは、ユーザーがエディター内からリンクを追加/編集/削除できるようにするビルトインボタン拡張機能です。 「アンカー」がボタンのリストのボタンとして渡されると、この拡張子が有効になり、ツールバーの対応するボタンをクリックしてトリガーできます。
アンカーフォームのオプションは、アウターオプションオブジェクトのメンバーであるオブジェクトとして渡されます。例：
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' ]
} ,
anchor : {
/* These are the default options for anchor form,
if nothing is passed this is what it used */
customClassOption : null ,
customClassOptionText : 'Button' ,
linkValidation : false ,
placeholderText : 'Paste or type a link' ,
targetCheckbox : false ,
targetCheckboxText : 'Open in new window'
}
}
} ) ;null'Button'encodeURIを使用して有効な文字に変換します。デフォルト： false'Paste or type a link'target属性を変更します。デフォルト： false'Open in new window'ペーストハンドラーは、ユーザーが貼り付けたときにコンテンツをフィルタリングしようとする組み込みの拡張機能です。ペーストハンドラーフィルターが特定のオプションを介して構成できる方法。
ペースト処理のオプションは、アウターオプションオブジェクトのメンバーであるオブジェクトとして渡されます。例：
var editor = new MediumEditor ( '.editable' , {
paste : {
/* This example includes the default options for paste,
if nothing is passed this is what it used */
forcePlainText : true ,
cleanPastedHTML : false ,
cleanReplacements : [ ] ,
cleanAttrs : [ 'class' , 'style' , 'dir' ] ,
cleanTags : [ 'meta' ] ,
unwrapTags : [ ]
}
} ) ;truefalsetrueの場合、またはcleanPaste(text)ヘルパーメソッドを呼び出すときに、Paste中に使用するレゲックスおよび交換テキストのカスタムペア（2つの要素アレイ）。これらの代替品は、組み立ての代わりの前に実行されます。デフォルト： []trueまたはcleanPaste(text)ヘルパーメソッドを呼び出すときに、ペースト中に使用するregexpのカスタムペア（2つの要素配列）と交換テキスト。これらの代替品は、組み込みの交換後に実行されます。デフォルト： []trueまたはcleanPaste(text)またはpasteHTML(html,options)ヘルパーメソッドを呼び出すときに、PASTE中に削除する要素属性のリスト。デフォルト： ['class', 'style', 'dir']trueまたはcleanPaste(text)またはpasteHTML(html,options)ヘルパーメソッドを呼び出すときに、貼り付け中に削除する要素タグ名のリスト。デフォルト： ['meta']trueの場合、またはcleanPaste(text)またはpasteHTML(html,options) 。デフォルト： []キーボードコマンドハンドラーは、エディターで実行するアクションにキーコンビネーションをマッピングするための組み込み拡張機能です。
KeyboardCommandsのオプションは、外側のオプションオブジェクトのメンバーであるオブジェクトとして渡されます。例：
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : {
/* This example includes the default options for keyboardCommands,
if nothing is passed this is what it used */
commands : [
{
command : 'bold' ,
key : 'B' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'italic' ,
key : 'I' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'underline' ,
key : 'U' ,
meta : true ,
shift : false ,
alt : false
}
] ,
}
} ) ;editor.execAction()に渡された引数falseとして定義されている場合、ショートカットは無効になりますキーボードコマンドを無効にするには、 keyboardCommandsオプションの値をfalseに設定します。
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;Auto-Linkハンドラーは、テキストフィールドに入力されたURLをHTMLアンカータグに自動的に回転させる組み込み拡張機能です（MarkDownの機能と同様）。この機能はデフォルトでオフになっています。
組み込みの自動リンクサポートを有効にするには、 autoLinkオプションの値をtrueに設定します。
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;画像ドラッグハンドラーは、ドラッグとドロップをコンテンツ誘導型に処理するための組み込みの拡張機能です。この機能はデフォルトでオンになっています。
組み込みの画像のドラッグを無効にするには、 imageDraggingオプションの値をfalseに設定します。
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; ドラッグ＆ドロップイベントの防止を停止し、一般的にファイルのドラッグを無効にするには、ダミーイメージングの拡張を提供します。
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;5.0.0のコード状態により、編集者は常にドラッグアンドドロップアクションを防止しました。 6でファイルのドラッグを無効にするためのより良い方法があります。*
var editor = new MediumEditor ( '.editable' , {
delay : 1000 ,
targetBlank : true ,
toolbar : {
buttons : [ 'bold' , 'italic' , 'quote' ] ,
diffLeft : 25 ,
diffTop : 10 ,
} ,
anchor : {
placeholderText : 'Type a link' ,
customClassOption : 'btn' ,
customClassOptionText : 'Create Button'
} ,
paste : {
cleanPastedHTML : true ,
cleanAttrs : [ 'style' , 'dir' ] ,
cleanTags : [ 'label' , 'meta' ] ,
unwrapTags : [ 'sub' , 'sup' ]
} ,
anchorPreview : {
hideDelay : 300
} ,
placeholder : {
text : 'Click to edit'
}
} ) ; デフォルトでは、MediumEditorは、サポートされているすべてのブラウザーに適切にサポートされているdocument.execCommand()のコマンドのほとんどのボタンをサポートしています。
MediumEditorは、デフォルトでは、巨大なツールバーを避けるためにここにリストされているボタンのみを表示します。
これらはすべて、MediudEditorでサポートされている組み込みボタンです。
利用可能なテーマのリストについては、wikiページをご覧ください：https：//github.com/yabwe/medium-editor/wiki/themes
MediudEditorオブジェクトのAPIドキュメントをWikiで表示してください。詳細については、MediumEditorオブジェクトでサポートされているすべてのメソッドの詳細をご覧ください。
on()経由で添付されたDOMイベントにリスナーを取り外しますimportSelection()exportSelection()によって返された値（））saveSelection()が呼び出されたときに選択されたものに選択を復元しますdocument.execCommand('createLink')コマンドを介してリンクを作成しますdocument.execCommandを介して組み込みのアクションを実行しますdocument.queryCommandState(action)の周りのラッパー特定のアクションがすでに選択に適用されているかどうかを確認するため。delayオプションとして渡された時間によって実行される機能を遅らせるindexで要素のinnerHTMLトリミングしますindexの要素のhtmlにinnerHTMLを設定します既存のMediuanditorインスタンスに新しい要素を動的に追加することができます。
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , this . _handleEditableInput . bind ( this ) ) ;
// imagine an ajax fetch/any other dynamic functionality which will add new '.editable' elements to the DOM
editor . addElements ( '.editable' ) ;
// OR editor.addElements(document.getElementsByClassName('editable'));
// OR editor.addElements(document.querySelectorAll('.editable'));要素または一連の要素をaddElements(elements)に渡すことは次のとおりです。
this.elementsアレイに追加します。<textarea>要素の場合：<textarea>を非表示にします<div contenteditable=true>要素を作成し、要素配列に追加します。簡単に、取り壊したい要素の要素または配列を除いてremoveElements呼び出してください。各要素自体は満足できるままです - すべてのイベントハンドラーとそれへのすべての参照を削除するだけなので、DOMから安全に削除できます。
editor . removeElements ( document . querySelector ( '#myElement' ) ) ;
// OR editor.removeElements(document.getElementById('myElement'));
// OR editor.removeElements('#myElement');
// in case you have jQuery and don't exactly know when an element was removed, for example after routing state change
var removedElements = [ ] ;
editor . elements . forEach ( function ( element ) {
// check if the element is still available in current DOM
if ( ! $ ( element ) . parents ( 'body' ) . length ) {
removedElements . push ( element ) ;
}
} ) ;
editor . removeElements ( removedElements ) ; ContentEditableの変更を観察するには、 subscribe()メソッドを介して公開されたカスタム'editableInput'イベントを使用します。
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ;このイベントは、MediudEditor（IE9+およびEdgeを含む）でサポートされているすべてのブラウザでサポートされています！ Mediuanditorの1つのインスタンスが複数の要素を監視している場合を支援するために、イベントハンドラーに渡された2番目の引数（上記の例でeditable ）は、実際に変更された満足できる要素への参照です。
これは、以下を含む、満足のいく要素の変更をキャプチャする必要がある場合に便利です。
なぜこれが興味深いのか、コンテンツ誘導性の要素のinputイベントに添付する代わりに、なぜこのイベントを使用する必要があるのですか？
したがって、ほとんどの最新のブラウザ（Chrome、Firefox、Safariなど）では、 inputイベントは正常に機能します。実際、 editableInputは、これらのブラウザのinputイベントのプロキシにすぎません。ただし、 inputイベントはIE 9-11の満足できる要素ではサポートされておらず、Microsoft Edgeではほとんどサポートされていますが、完全ではありません。
したがって、Internet ExplorerとMicrosoft EdgeのeditableInputイベントを適切にサポートするために、MediumEditorはselectionchangeとkeypressイベントの組み合わせを使用し、 document.execCommandへの呼び出しを監視します。
中編集者の拡張機能を開発する方法を学ぶために、ドキュメントを確認してください。
画像やメディアの埋め込み、テーブル、マークダウンなどの既存の拡張機能とプラグインのリストは、こちらをご覧ください。
デモをローカルに実行するには：
npm installを実行しますnode index.jsを実行しますhttp://localhost:8088/demo/index.htmlに移動して、デモを表示します中編集の開発タスクは、Gruntによって管理されています。必要なすべてのパッケージをインストールするには、呼び出してください。
npm installすべてのテストを実行し、デモページでテストするためにDISTファイルを作成するには、次のことを呼び出します。
gruntこれらは他の利用可能なgruntタスクです。
ソースファイルは、 SRCディレクトリ内にあります。 DISTディレクトリ内のファイルではなく、これらのファイルを変更してください。
いくつかのバグを殺す:)
git checkout -b my-new-feature ）git commit -am 'Added some feature' ）をコミットします。git push origin my-new-feature ）プロジェクト全体で一貫した見た目のコードを作成するのに役立つために、いくつかのツールを使用して役立ちます。プロジェクトのコーディングを行うために、最も人気のある編集者/IDEのプラグインがありますが、プロジェクトでも使用する必要があります。
各ビルドでJshintを使用して、JSのキャッチが簡単なエラーと潜在的な問題を見つけます。 Jshintの設定は、プロジェクトのルートにある.jshintrcファイルにあるものを見つけることができます。
各ビルドでJSCを使用して、プロジェクトに持っているコードスタイルのルールを実施します。 JSCS設定は、プロジェクトのルートにある.jscsrcファイルにあります。
EditorConfigを使用して、さまざまな編集者とIDEの間で一貫したコーディングスタイルを維持しています。プロジェクトのルートにある.editorconfigファイルに設定を見つけることができます。
最初の貢献のための簡単なものをお探しですか？簡単な最初のバグを修正してみてください！
https://github.com/yabwe/medium-editor/graphs/contributors
ここに組織を追加すると、ランディングページに追加できます！
MIT：https：//github.com/yabwe/medium-editor/blob/master/license
