npm包medium-editor-insert-plugin使用教程

介绍

medium-editor-insert-plugin是一个npm包，它为Medium Editor编辑器添加了插入多媒体内容的功能。本文将详细介绍如何使用这个插件。

安装

在使用本插件之前，需要先安装Medium Editor编辑器。可以通过命令行输入以下命令来安装medium-editor-insert-plugin：

npm install --save medium-editor medium-editor-insert-plugin

使用

引入依赖

首先，在项目中引入所需依赖项：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor-insert-plugin@2.5.1/dist/css/medium-editor-insert-plugin.min.css">
<script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/medium-editor-insert-plugin@2.5.1/dist/js/medium-editor-insert-plugin.min.js"></script>

初始化编辑器

接下来，我们需要初始化Medium Editor编辑器和medium-editor-insert-plugin插件。在HTML页面中创建一个元素，并指定其ID作为编辑器的容器：

<div id="editor"></div>

然后，使用以下JavaScript代码初始化编辑器和插件：

var editor = new MediumEditor('#editor');
$('#editor').mediumInsert({
    editor: editor,
});

这将在#editor元素中创建一个带有插入多媒体内容的编辑器。

插入图片

现在，我们可以通过单击插入按钮来插入图片。此时会弹出一个对话框，要求输入图片URL和标题。

// javascriptcn.com 代码示例
$("#editor").mediumInsert({
  editor: editor,
  addons: {
    images: {
      fileUploadOptions: { // 图片上传配置，仅演示，具体接口需要开发者自行实现
        url: "http://localhost:8080/upload",
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
      },
      uploadCompleted: function($el, data) {
        if(data.code === 200){
          console.log(`upload success, ${data.url}`)
        }else{
          console.error(data.message)
        }
      }
    },
  },
});

插入视频

与插入图片类似，我们也可以通过单击插入按钮来插入视频。此时会弹出一个对话框，要求输入视频URL和标题。

// javascriptcn.com 代码示例
$("#editor").mediumInsert({
  editor: editor,
  addons: {
    embeds: {
      oembedProxy: null,
      storeMeta: false,
      parseOnPaste: true,
      placeholder: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
      captions: true
    },
  },
});

结论

medium-editor-insert-plugin为Medium Editor编辑器增加了插入多媒体内容的功能。在本文中，我们介绍了如何使用该插件插入图片和视频，以及如何初始化编辑器和插件。这将帮助开发人员更轻松地创建具有多媒体内容的富文本编辑器。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35379