jquery - 中型编辑器插入按钮 - 较轻的示例，然后是那里的插件

Question

使用 contentEditable 并希望添加中等样式的插入按钮。

此按钮与光标显示在同一行，但在您开始输入后立即隐藏。然后，当您按回车并开始新行时，它将再次显示。

例如，我发现了这个：http: //linkesch.com/medium-editor-insert-plugin/

但是依赖关系很大，我不需要使用任何现有的插件，因为我的图像上传等已经完成。

对实现与提供的链接相同的效果有什么帮助吗？只需要一个简单的按钮，可以定位在输入行的开头。

谢谢。

Answer 1

medium-editor-insert-plugin contributor here.

We are in the process of rewriting the plugin using vanilla JS (ES2015 to be specific) for the upcomming v3.0. So the plugin will be dependencies free (except for medium-editor of course).

• You can check it here
• Also don't forget to read latest statement about the 3.0

Also, if you do not want to use the plugin and build your own you can still take inspiration from it!

Answer 2

如果您希望为 MediumEditor 构建您自己的非常简单的按钮，那么需要做很多工作才能使构建自定义扩展变得简单而灵活。

这里有一个很好的教程来介绍如何为工具栏构建一个简单的按钮。

还有文档概述了按钮所需的所有协定，以及此处公开给所有 MediumEditor 扩展的辅助方法

创建基本按钮扩展后，您可以实例化它并在创建时将其传递给编辑器：

var myCustomButton = new MyCustomButton(); // constructor for your button

var editor = new MediumEditor('.editor', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'myButton']
    },
    extensions: {
        'myButton': myCustomButton
    }
});

您可以通过该extensions选项将任何类型的扩展名传递到编辑器中，但按钮要求您定义按钮在工具栏中相对于其他按钮的显示位置，并且通过该toolbar.button选项进行控制。