medium editor

如果您有興趣幫助維護Github上最成功的Wysiwyg文本編輯之一，請告訴我們！ （請參閱第1503條）

中端

這是中線編輯工具欄的克隆。

中型培訓是使用Vanilla JavaScript編寫的，無需其他框架。

瀏覽器支持

基本用法

演示

演示：http：//yabwe.github.io/medium-editor/

安裝

通過NPM：

在您的控制台中運行： npm install medium-editor

通過鮑爾：

bower install medium-editor

通過外部CDN

• 使用JSDELIVR。

對於最新版本：

 < 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 " >

• 使用CDNJ。

手動安裝：

將最新版本並將中型編輯器的樣式顯示到您的頁面：

在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 >

上面的代碼將將所有元素帶有.Ededibal類將所有元素轉換為HTML5可編輯內容，並將中型編輯器工具欄添加到其中。

您還可以通過HTML元素列表：

 var elements = document . querySelectorAll ( '.editable' ) ,
    editor = new MediumEditor ( elements ) ;

媒體還支持Textarea。如果您提供了文本元素，則腳本將創建一個具有contentEditable=true的新Div，隱藏TextAarea並將TextAarea值鏈接到Div HTML內容。

與各種框架集成

人們在中型培訓機上貢獻了包裝紙，以與不同的框架和技術堆棧集成在一起。查看已經為Mediuneditor編寫的現有包裝紙和集成的列表！

中型選項

在Mediumeditor的所有各種選項上查看Mediumeditor選項文檔。

自定義中編輯器的選項將作為第二個參數傳遞給中型構造函數。例子：

 var editor = new MediumEditor ( '.editor' , {
    // options go here
} ) ;

核心選項

• ActiveButtonClass ：CSS類添加到工具欄中的活動按鈕中。默認值： 'medium-editor-button-active'
• 鈕扣標籤：按鈕上的標籤類型。值： false | 'fontawesome'。默認值： false

筆記：

使用'fontawesome'作為鈕扣標籤需要Fontawesome CSS的4.1.0版，以確保將正確顯示所有圖標

• 延遲：以毫秒為單位顯示工具欄或錨標籤預覽的時間。默認值： 0
• 禁用：啟用/禁用返回鍵的使用。您還可以使用設置數據刪除歸還屬性來設置特定的元素行為。默認值： false
• 禁用次數：允許/允許/刪除兩個（或更多）空的新線條。您還可以使用設置數據可達雙迴報屬性來設置特定的元素行為。默認值： false
• disable Extraspaces ：設置為true時，它會在元素的開頭和結尾處取消空格。此外，它也將在2個單詞之間輸入2個連續的空間。默認值： false
• 禁用：啟用/禁用添加可滿足的行為。對於使用定制按鈕/操作的工具欄很有用。您還可以使用設置可數據編輯屬性來設置特定的元素行為。默認值： false
• ElementsContainer ：指定一個DOM節點包含MedideDitor的工具欄和錨預覽元素。默認值： document.body
• 擴展：使用的擴展名（請參閱自定義按鈕和擴展名）有關更多信息。預設: {}
• 拼寫檢查：啟用/禁用本地滿足自動拼寫檢查。默認值： true
• targetBlank ：啟用/禁用target =“ _ blank”用於錨定標籤。默認值： false

工具欄選項

中型設備的工具欄被實現為內置擴展名，每當用戶選擇某些文本時，它會自動顯示。該工具欄可以容納任何定義的內置按鈕，但也可以將任何自定義按鈕作為擴展名中的傳遞。

工具欄的選項作為對像傳遞，該對像是外部選項對象的成員。例子：

 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
    }
} ) ;

• 允許multiparagraphSelection ：啟用/禁用在選擇多個段落/塊元素時是否應顯示工具欄。默認值： true
• 按鈕：要在工具欄上顯示的按鈕集。默認值： ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
  • 有關更多按鈕選項的詳細信息，請參見按鈕選項
• diffleft ：將添加到工具欄的X軸定位中的像素中的值。默認值： 0
• 差異：將添加到工具欄的Y軸定位中的像素中的值。默認值： -10
• FirstButtonClass ：CSS類添加到工具欄的第一個按鈕中。默認值： 'medium-editor-button-first'
• LastButtonClass ：CSS類添加到工具欄中的最後一個按鈕中。默認值： 'medium-editor-button-last'
• 相對范圍：將工具欄附加到身體而不是身體。通過時，工具欄也將是relative定位的，而不是absolute位置。默認值： null
• StandardizesElectionStart ：啟用/禁用標準化範圍的開始時，每當分析所選文本以更新工具欄按鈕狀態時，如何在瀏覽器之間確定。默認值： false
• 靜態：啟用/禁用工具欄始終在相同位置相對於中編輯元素顯示。默認值： false

僅在使用static選項時適用的選項：

• 對齊： left | center | right - 當靜態選項為true ，這會使靜態工具欄相對於中編輯器元素對齊。默認值： center
• 粘性：當靜態選項為true ，這可以啟用/禁用工具欄“粘貼”到視口上，並在頁面滾動時在屏幕上保持可見。默認值： false
• updateOnEmptyselection ：當靜態選項為true時，即使選擇折疊，也可以啟用/禁用工具欄按鈕的狀態（沒有選擇，只是光標）。默認值： false

要禁用工具欄（也可以禁用錨定瀏覽擴展名），請將toolbar選項的值設置為false ：

 var editor = new MediumEditor ( '.editable' , {
    toolbar : false
} ) ; 

按鈕選項

可以通過將對像傳遞到按鈕陣列而不是字符串來修改按鈕行為。這允許覆蓋按鈕的某些默認行為。以下選項是您可能會覆蓋的按鈕的一些基本部分，但是可以通過這些按鈕選項覆蓋MediumEditor.Extension.prototype 。 （查看按鈕的源代碼，以查看所有可以覆蓋的內容）。

• 名稱：按鈕的名稱被覆蓋
• 操作：當單擊按鈕時，請參數傳遞給MediumEditor.execAction() 。
• ARIA ：值為工具欄中顯示的按鈕元素的ARIA-LABEL屬性值。這也用作按鈕的工具提示。
• 標記名稱：元素標籤名稱的數組，該名稱表明已經應用了此按鈕。如果已經應用了此操作，則該按鈕將在工具欄中顯示為“活動”。
  • 示例：對於“粗體”，如果文本在<b>或<strong>標籤中，則表明文本已經大膽。因此，大膽的標籤名數組將是： ['b', 'strong']
  • 注意：如果將useQueryState設置為true ，則不會使用。
• 樣式：一對CSS屬性和值，表明已經應用了此按鈕。如果已經應用了此操作，則該按鈕將在工具欄中顯示為“活動”。
  • 示例：對於“粗體”，如果文本曾經在具有'font-weight'樣式屬性設置為700或'bold'元素中，則表明文本已經大膽。因此，BOLD的樣式對象將為{ prop: 'font-weight', value: '700|bold' }
  • 注意：如果將useQueryState設置為true ，則不會使用。
  • 樣式對象的屬性：
    • 道具：CSS屬性的名稱
    • 值：CSS屬性的值（多個值可以通過'|'分離）
• USEQUERYSTATE ：啟用/禁用此按鈕是否應該使用內置document.queryCommandState()方法來確定是否已經應用了操作。如果已經採用了操作，則該按鈕將在工具欄中顯示為“活動”
  • 示例：對於'Bold'，如果將其設置為true，則代碼將調用document.queryCommandState('bold') ，如果瀏覽器認為本文已經是粗體，則將返回true
• ContentDefault ：默認的innerHTML將放入按鈕內
• contentfa ：如果將媒體介質的選項設置為'fontawesome'則可以用於按鈕的內容innerHTML
• classList ：將添加到按鈕的classNames（字符串）數組
• attrs ：一組鍵值對添加到按鈕元素的自定義屬性。

覆蓋按鈕的示例（在這裡，目標是通過具有分別產生<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'
    }
}
} ) ;

• HIDEDELAY ：在鼠標留下錨定標籤後，以毫秒為單位顯示錨標預覽的時間。默認值： 500
• PreviewValueSelector ：默認選擇器要找到將ActiveAnChor值放在預覽中的位置。您只需要在修改Anchor-Preview擴展程序呈現方式的方式時才需要覆蓋此問題。默認： 'a'
• 顯示WhentoolBaris -Visible ：確定在可見工具欄時是否顯示錨標預覽。如果工具欄的靜態選項為true，則應將此值設置為True，並且您希望預覽同時顯示。默認值： false
• ShowonEmptylinks ：確定是否在與HREF鏈接上顯示為“或#something”上的錨標預覽。如果您不希望在此類用例中顯示預覽，則應將此值設置為False。默認值： true

false禁用Anchor anchorPreview

 var editor = new MediumEditor ( '.editable' , {
    anchorPreview : false
} ) ; 

筆記：

• 如果禁用工具欄（通過toolbar: false選項或data-disable-toolbar屬性）自動禁用錨定瀏覽量。
• 如果未啟用錨編輯表格，請單擊錨定瀏覽量將不允許編輯鏈接的HREF

佔位符選項

佔位符處理程序是一個內置的擴展程序，當編輯器為空時會顯示佔位符文本。

佔位符的選項作為對像傳遞，該對像是外部選項對象的成員。例子：

 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
    }
} ) ;

• 文本：當未將佔位符設置為false時，定義空含有符合人的默認佔位符。您可以通過在編輯器元素上設置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'
    }
}
} ) ;

• CustomClassoption ：自定義類名稱可以選擇添加到其創建的鏈接（即''按鈕'）中。如果以非空字符串的形式傳遞，將顯示一個複選框，允許用戶選擇是否將類添加到創建的鏈接中。默認值： null
• CustomClassoptiontext ：使用CustomClassoption時，要在復選框中顯示的文本。默認： 'Button'
• LinkValidation ：啟用/禁用在錨點鏈接上檢查是否有常見的URL協議。使用encodeURI將無效的URL字符（IE空間）轉換為有效字符。默認值： false
• 原位：文本將顯示為錨點輸入的佔位符。默認值： 'Paste or type a link'
• TargetCheckBox ：啟用/禁用顯示“在新窗口中打開”複選框，該複選框會更改創建鏈接的target屬性。默認值： false
• TargetCheckboxtext ：通過TargetCheckbox啟用的複選框中顯示的文本。默認： '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 : [ ]
    }
} ) ;

• 力plaintext ：迫使粘貼為純文本。默認值： true
• CleanPastEdhtml ：清潔來自不同來源的粘貼內容，例如Google文檔等。默認值： false
• 預拆下置換：當plosplaintext或CleanPastEdhtml為true或調用cleanPaste(text) Helper方法時，將在粘貼期間使用的Regexp的自定義對（2個元素陣列）和替換文本。這些替代品是在內置替換之前執行的。預設: []
• 清潔置換：REGEXP的自定義對（2個元素陣列）和粘貼期間使用的替換文本，當plastextext或cleanpastedhtml true或調用cleanPaste(text) Helper方法時。這些替換在內置替換後將執行。預設: []
• CleanAttrs ：當CleanPastEdhtml為true或調用cleanPaste(text)或pasteHTML(html,options)輔助方法時，要刪除的元素屬性列表。默認值： ['class', 'style', 'dir']
• CleanTags ：當CleanPastEdhtml為true時，或致電cleanPaste(text)或pasteHTML(html,options)輔助方法時，要刪除的元素標籤名稱列表。默認值： ['meta']
• unwraptags ：粘貼列表要解開包裝的元素標籤名稱（刪除元素標籤，但保留其子元素）時，當CleanPastEdhtml為true或調用cleanPaste(text)或pasteHTML(html,options)輔助方法時。預設: []

鍵盤命令選項

鍵盤命令處理程序是一個內置擴展程序，用於將鍵組合映射到編輯器中執行的操作。

鍵盤命令的選項作為對像傳遞，該對像是外部選項對象的成員。例子：

 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 ，快捷方式將被禁用
  • 鍵：觸發此命令的鍵盤字符
  • 元：CTRL/META鍵必須是活動的還是不活動的
  • SHIFT ：換檔鍵是必須處於活動狀態還是不活動
  • alt ：Alt密鑰是否必須處於活動狀態還是不活動

要禁用鍵盤命令，請將keyboardCommands選項的值設置為false ：

 var editor = new MediumEditor ( '.editable' , {
    keyboardCommands : false
} ) ;

自動鏈接選項

自動鏈接處理程序是一個內置擴展程序，它會自動將輸入的URL轉換為文本字段中的HTML錨標籤（類似於Markdown的功能）。默認情況下，此功能已關閉。

要啟用內置自動鏈接支持，請將autoLink選項的值設置為true ：

 var editor = new MediumEditor ( '.editable' , {
    autoLink : true
} ) ;

圖像拖動選項

圖像拖動處理程序是一個內置擴展程序，用於處理拖動和將圖像刪除到可滿足的內容中。此功能默認情況下。

要禁用內置圖像拖動，請將imageDragging選項的值設置為false ：

 var editor = new MediumEditor ( '.editable' , {
    imageDragging : false
} ) ; 

禁用文件拖動

為了防止拖放事件並禁用文件拖動，請提供一個虛擬imagedragging擴展名。

 var editor = new MediumEditor ( '.editor' , {
    extensions : {
        'imageDragging' : { }
    }
} ) ;

由於5.0.0中的代碼狀態，編輯器始終阻止任何拖放操作。我們將有一種更好的方法來禁用文件。 ***

選項示例：

 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()的大多數命令提供了按鈕，這些按鈕在其所有支持的瀏覽器中都得到了很好的支持。

默認按鈕。

默認情況下，Mideditor將僅顯示此處列出的按鈕，以避免使用巨大的工具欄：

• 大膽的
• 斜體
• 強調
• 錨點（用於通過錨擴展收集URL的內置支持）
• H2
• H3
• 引用

所有按鈕。

這些都是由中端支持的所有內置按鈕。

• 大膽的
• 斜體
• 強調
• 罷工
• 下標
• 上標
• 錨
• 圖像（這只是將選定的文本轉換為圖像標籤）
• 引用
• pre
• 訂購清單
• unorderedlist
• 縮進（將選定的文本移至一個級別）
• OUTTENT （將選定的文本向下移動一個級別）
• Justifyleft
• JustifyCenter
• Jusifyright
• 正當
• H1
• H2
• H3
• H4
• H5
• H6
• 刪除Format （清除內聯樣式格式，保留塊）
• HTML （分析選定的HTML並將其轉換為實際的HTML元素）

主題

查看Wiki頁面以獲取可用主題的列表：https：//github.com/yabwe/medium-editor/wiki/themes

API

有關WIKI上的Mediumeditor對象API文檔，以獲取有關中端對像上支持的所有方法的詳細信息。

初始化方法

• 媒體（元素，選項） ：創建一個媒體的實例
• .destroy（） ：撕下編輯器（如果已經設置），刪除所有DOM元素和事件處理程序
• .setup（） ：編輯器如果已經被銷毀，重建編輯器，重新創建DOM元素並附加事件處理程序
• .Addelements（） ：將元素添加到中端已經初始化的實例
• .RemoveElements（） ：從中媒體的已經初始化的實例中刪除元素

事件方法

• 。
• 。 on()
• 。
• 。
• .trigger（名稱，數據，可編輯） ：手動觸發自定義中編輯事件

選擇方法

• 。
• .ExportSelection（） ：返回所選文本的數據表示，可以通過importSelection()應用該文本
• .ImportSelection（選擇State） ：使用先前選擇的文本的數據表示（IE exportSelection()返回的值）還原選擇
• .getFocusedElement（） ：返回一個元素，如果當前由中媒體監控的任何可滿足元素已集中
• .getSelectedParentElement（range） ：獲取包含當前選擇的父錄製元素
• .RestoresElection（） ：將選擇還原為saveSelection()時選擇的選擇
• .saveselection（） ：內部存儲一組選定的文本
• .selectallcontents（） ：擴展選擇以包含集中滿足的所有文本
• .SelectElement（element） ：更改選擇為特定元素，並更新工具欄以反映選擇
• .stopselectionupdates（） ：阻止工具欄更新以反映所選文本的狀態
• .startselectionupdates（） ：將工具欄放回正常的更新狀態

編輯操作方法

• 。
• .CreatElink（OPTS） ：通過本機document.execCommand('createLink')命令創建一個鏈接
• 。 document.execCommand
• .pastehtml（HTML，選項） ：用HTML替換當前選擇
• 。 document.queryCommandState(action)

輔助方法

• 。 delay
• .getContent（index） ：在index處獲取元素的修剪innerHTML
• .getExtensionByName（名稱） ：獲取帶有指定名稱的擴展程序的引用
• .RESETCONTENT（element） ：將所有元素的內容或特定元素重置為其值時，將其添加到編輯器中
• .serialize（） ：返回帶有元素內容的JSON對象
• .setContent（HTML，索引） ：將innerHTML設置為index的元素的html

靜態方法/屬性

• 。
• .version ：中型庫庫的版本信息

動態添加/刪除元素到您的實例

可以將新元素動態添加到您現有的媒體實例：

 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 ) ; 

捕獲DOM變化

為了觀察可滿足的任何更改，請使用通過subscribe()方法暴露的自定義'editableInput'事件：

 var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
    // Do some work
} ) ;

該事件在由Mediumediter支持的所有瀏覽器（包括IE9+和Edge）支持的所有瀏覽器中支持！為了幫助案例，當中媒體的一個實例正在監視多個元素時，第二個參數傳遞給了事件處理程序（上面的示例中editable ）將是對實際已更改的可滿足元素的引用。

當您需要捕獲對可滿足元素的任何修改，包括：

• 打字
• 切割/粘貼
• 更改工具欄中的按鈕
• 撤消/重做

為什麼這很有趣？為什麼要使用此事件，而不僅僅是附加到可滿足元素上的input事件？

因此，對於大多數現代瀏覽器（Chrome，Firefox，Safari等）， input事件效果很好。實際上， editableInput只是這些瀏覽器中input事件的代理。但是，IE 9-11中的可滿足元素不支持input事件，並且大多在Microsoft Edge中得到了支持，但不完全支持。

因此，為了正確支持Internet Explorer和Microsoft Edge中的editableInput事件，Mideditor使用了selectionchange和keypress事件的組合以及對document.execCommand的調用。

擴展和插件

檢查文檔，以了解如何開發中源的擴展。

可以在此處找到現有的擴展名和插件的列表，例如圖像和媒體嵌入，表和降價。

發展

在本地運行演示：

1. 克隆本地倉庫
2. 從您的控制台上npm install
3. 從根運行node index.js
4. 導航到http://localhost:8088/demo/index.html查看演示

中型開發任務由Grunt管理。要安裝所有必要的軟件包，只需調用：

npm install

要運行所有測試並構建用於在演示頁面上測試的DIST文件，只需調用：

grunt

這些是其他可用的咕unt任務：

• JS ：運行JSlint和Jasmine測試，並創建腳本的更新和串聯版本；
• CSS ：運行AutoPrefixer和CSSLINT
• 測試：運行茉莉測試，JSLINT和CSSLINT
• 觀看：觀看腳本/SCSS文件上的修改
• 規格：根據指定文件運行任務

源文件位於SRC目錄內部。確保更改這些文件，而不是DIST目錄中的文件。

貢獻

殺死一些錯誤:)

1. 叉
2. 創建您的功能分支（ git checkout -b my-new-feature ）
3. 測試您的更改盡力而為。
4. 更新文檔，以反映您的更改，如果它們添加或更改當前功能。
5. 提交您的更改（ git commit -am 'Added some feature' ） ，而沒有來自DIST目錄的文件。
6. 推到分支（ git push origin my-new-feature ）
7. 創建一個新的拉請請求

代碼一致性

為了幫助在整個項目中創建一致的外觀代碼，我們使用一些工具來幫助我們。它們為大多數受歡迎的編輯/IDE提供了插件，可以為我們的項目進行編碼，但是您也應該在項目中使用它們！

Jshint

我們在每種構建上使用Jshint來查找JS中易於捕獲的錯誤和潛在問題。您可以在項目根部的.jshintrc文件中找到我們的jshint設置。

JSC

我們在每個構建上使用JSC來強制我們為項目制定的一些代碼樣式規則。您可以在項目根部的.jscsrc文件中找到我們的JSCS設置。

EditorConfig

我們使用EditorConfig來維持各個編輯器和IDE之間的一致編碼樣式。您可以在項目根部的.editorconfig文件中找到我們的設置。

簡單的第一個錯誤

尋找簡單的首次貢獻的東西？嘗試修復一個簡單的第一個錯誤！

貢獻者（100+計數！）

https://github.com/yabwe/medium-editor/graphs/contributors

您的組織是使用媒介的嗎？

在此處添加您的組織，我們可以將您添加到我們的目標頁面上！

執照

麻省理工學院：https：//github.com/yabwe/medium-editor/blob/master/license