MediumEditor

MediumEditor是一款编辑器，可以扩展到您的文本阅读器或者是扩展到内容管理工具中使用，当用户使用鼠标选择一段文字的时候这款编辑器就会自动弹出，从而方便用户编辑选中的文字或者是重新排版文字，软件并不是的，仅仅作为内联的扩展工具运行，每次选择内容的时候都会弹出编辑工具页面，让用户随时对已选的内容修改，例如对当前的内容附加H1、H2标题，对内容附加下划线，对内容加粗或者倾斜，也可以添加重点引用符号，让用户可以快速对内容调整，您可以将MediumEditor部署到浏览器使用，在浏览器选择文本就可以弹出编辑工具条！

MediumEditor软件功能

1、MediumEditor提供简单的文本编辑功能

2、 通过这款软件修改选中的文本

3、软件显示工具条，选中文本就自动弹出修改工具

4、可以作为扩展工具安装到浏览器使用

5、支持Chme、Firefox、Safa、IE和Edge

6、支持内容添加，可以附加图像到编辑器

7、支持按钮添加，可以自定义编辑器界面工具条的按钮

8、支持粗体，斜体，下划线，删除线

9、支持下标，上标、图像、有序列表，无序列表、缩进

10、支持h1，h2，h3，h4，h5，h6、removeFormat、html

11、编辑器的按钮功能都是可以自定义的

MediumEditor软件特色

1、MediumEditor工具栏

包含所有MediumEditor按钮的整个工具栏都是作为扩展实现的！

2、自动链接检测

自动检测何时添加了L并将其转换为锚标记

3、锚点预览工具提示

当用户将鼠标悬停在链接上时，将显示工具提示，显示锚标记的href

4、图像拖放

允许用户将图像拖放到编辑器中

5、键盘指令

将键盘快捷键映到各种命令

6、占位符文字

当编辑器为空时显示占位符文本

7、粘贴处理

处理过滤和修改粘贴到编辑器中的文本

MediumEditor使用说明

安装

通过npm：

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

通过Via：

bower install medium-editor

通过外部CDN

使用jsDelivr。

For the latest version:

For a custom one:

Using CDN.

手动安装：

下载最新版本，并将中型编辑器的样式表附加到您的页面：

在dist文件夹中找到下面提到的链接的文件。（./medium-editor/dist / …）

用法

下一步是引用编辑器的脚本

现在，您可以实例化一个新的MediumEditor对象：

上面的代码会将带有.editable类的所有元素转换为HTML5可编辑的内容，并向其中添加媒体编辑器工具栏。

您还可以传递HTML元素列表：

MediumEditor还支持textarea。如果提供textarea元素，脚本将使用创建一个新的div contentEditable=true，隐藏textarea并将textarea值链接到div HTML内容。

演练-构建扩展

DisableContextMenuExtension

您可以通过extension-example.html在源代码中找到此示例的演示。

要与演示交互，请通过以下方式从浏览器的fork中加载页面：

file://[Medium Editor Source Root]/demo/extension-example.html

1.定义扩展

举一个简单的例子，让我们创建一个扩展，当用户在编辑器上单击鼠标右键时，该菜单将禁止上下文菜单出现。

定义此扩展很简单，就像调用MediumEditor.Extension.extend和传入要覆盖的方法/属一样。

现在’disable-context-menu’，我们有了一个扩展名，可以像这样将其传递给MediumEditor：

2.附加到上下文菜单事件

为了使扩展程序实际执行某项作，我们需要在编辑器的contextmenu所有元素上附加该事件。我们可以通过实现该init方法来进行设置，该方法在设置MediumEditor的过程中在每个Extension上都被调用：

在这里，我们利用了所有扩展可用的一些帮助器。

我们正在使用this.getEditorElements，它是一个辅助函数，为我们提供了一个包含此编辑器的所有元素的数组。

我们正在使用this.base，它是对MediumEditor实例的引用。

我们正在使用this.base.on，这是MediumEditor附加到DOM事件的方法。使用此方法可确保在销毁MediumEditor时分离事件处理程序。

笔记：

有几种帮助程序方法，使我们可以直接调用MediumEditor实例，而无需引用this.base。其中之一是对该on方法的引用，因此除了上面的代码外，我们可以使用上面的代码，而在上面this.on(element, ‘contextmenu’, this.handleContextmenu.bind(this))的示例中，我们将使用它。

3.增加功能

因此，我们需要的最后一步是处理contextmenu事件并阻止默认作：

现在，我们有了一个有效的扩展程序，该扩展程序可以防止上下文菜单显示任何元素。让我们添加一些其他功能，以启用和禁用此功能。

4.利用自定义事件

假设我们希望支持每当用户按下ESCAPE时针对特定元素启用/禁用disable-context-menu扩展。为此，我们需要添加2个功能：

1、听keydown每个元素上的事件。为此，我们可以利用内置的editableKeyDowncustom nt。这使我们能够使用自定义事件侦听器的第二个参数（活动的编辑器元素）来打开/关闭data-allow-context-menu该元素上的属。

2、当contextmenu事件触发时，我们只希望阻止上下文菜单出现，如果data-allow-context-menu属不存在。

笔记：

对于这类事件keydown，我们可以始终使用currentTarget而不需要使用对editable元素的引用（例如，currentTarget在处理contextmenu事件时如何使用）。但是，有时可能需要手动触发这些事件之一，这使我们能够准确地指定我们要为其触发事件的可编辑元素。对于更复杂的事件（例如自定义focus和blur事件），它也是一种方便的标准化方法。