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