MediumEditor简介

MediumEditor是一个编辑器，可以扩展到您的文本阅读器或用于内容管理工具。当用户用鼠标选中一段文字时，这个编辑器会自动弹出，方便用户编辑选中的文字或者重新排列文字。软件不是。它只作为内联扩展工具运行，每次选择内容时都会弹出编辑工具页面，用户可以随时修改选择的内容。例如，将H1和H2的标题附加到当前内容，给内容加下划线，加厚或倾斜内容，或者添加关键参考符号，以便用户可以快速调整内容。可以将MediumEditor部署到浏览器中，在浏览器中选择文本弹出编辑工具栏！

MediumEditor软件功能

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

2.通过该软件修改所选文本。

3.软件显示工具栏，选择文本后会自动弹出修改工具。

4.它可以作为扩展工具安装到浏览器中。

5.支持Chme、火狐、Safa、IE和Edge

6、支持内容添加，可以将图片附加到编辑器中。

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

8.支持粗体、斜体、下划线和删除线。

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

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

1.编辑器的按钮功能可以自定义。

MediumEditor软件特色

1.MediumEditor工具栏

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

2.自动链路检测

自动检测何时添加l，并将其转换为锚标签。

3.锚定预览工具提示

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

4.图像拖放

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

5.键盘指令

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

6.占位符文本

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

7.糊状加工

过滤并修改粘贴到编辑器中的文本。

MediumEditor使用说明

固定

通过npm:

在控制台中运行:npm安装介质编辑器

通过:

bower安装介质编辑器

通过外部CDN

使用jsDelivr。

对于最新版本:

对于定制的:

使用CDN。

手动安装:

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

在dist文件夹中找到下面提到的链接文件。(./medium-editor/dist/& # 8230；)

使用

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

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

上面的代码将使用。可编辑类转换为HTML5可编辑内容，并向其中添加媒体编辑器工具栏。

您还可以传递一个HTML元素列表:

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

演练-构建扩展

disablecontextmenueextension

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

要与演示文稿交互，请通过以下方式从浏览器的分叉处加载页面:

文件://[媒体编辑器源代码根]/演示/扩展-示例. html

1.定义扩展

作为一个简单的例子，让我们创建一个扩展，当用户右键单击编辑器时，它将阻止上下文菜单出现。

定义这个扩展就像调用MediumEditor.Extension.extend()和传入要覆盖的方法/类一样简单。

现在& # 8217；禁用上下文菜单& # 8217；，我们有一个可以传递给MediumEditor的扩展，如下所示:

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

为了让扩展程序真正执行一个动作，我们需要将事件附加到编辑器中contextmenu的所有元素上。我们可以通过实现init()方法来设置它，该方法在设置MediumEditor期间在每个Extension中调用:

这里，我们使用一些对所有扩展都可用的助手。

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

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

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

注释:

有几个帮助器方法使我们能够直接调用MediumEditor实例，而无需引用this.base，其中之一是对on()方法的引用，因此除了上面的代码之外，我们还可以使用上面的代码，其中this.on(element，& # 8216；contextmenu & # 8217，这个。Handlecontextmenu.bind (this))，我们将使用它。

3.添加功能

因此，我们需要做的最后一步是处理contextmenu事件，并防止缺省情况发生:

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

4.使用自定义事件

假设我们希望支持在用户每次按下ESCAPE时为特定元素启用/禁用禁用上下文菜单扩展。为此，我们需要添加两个函数:

1.听听keydown每个元素上的事件。为此，我们可以利用内置的editableKeyDowncustom。这使我们能够使用自定义事件侦听器(活动编辑器元素)的第二个参数来打开/关闭数据允许上下文菜单元素的种类。

2.当contextmenu事件被触发时，我们只想防止上下文菜单出现，如果data-allow-context-menu类别不存在的话。

注释:

对于这种事件键下，我们可以始终使用currentTarget，而不使用对可编辑元素的引用(例如，在处理contextmenu事件时如何使用currentTarget)。但是，有时可能需要手动触发其中一个事件，这使我们能够准确地指定要触发事件的可编辑元素。对于更复杂的事件，例如自定义焦点和模糊事件，这也是一种方便的标准化方法。