Tinymce 自定义插件：扩展内容关联功能

2023-12-06 03:13:07

前言

Tinymce 是一款流行的文本编辑器，因其丰富的功能和易用性而被广泛应用于各种网站和应用程序。为了满足不同的需求，Tinymce 提供了丰富的插件系统，允许开发者自定义编辑器的功能。

在本文中，我们将介绍如何为 TinyMCE 自定义一个插件，以实现内容关联的功能。该插件允许用户在编辑器中输入内容时，将其与知识点进行关联。知识点的数据由后端提供，用户可以在输入框中输入关键词进行搜索，搜索结果将显示在一个下拉列表中。当用户选择一个知识点后，该知识点将与编辑器中的内容关联起来。

插件开发

1. 创建插件

首先，我们需要创建一个插件文件。该文件可以是一个普通的 JavaScript 文件，也可以是一个 TypeScript 文件。为了方便起见，我们这里创建一个名为 content-association.js 的 JavaScript 文件。

// content-association.js
(function (tinymce) {
  tinymce.PluginManager.add('content-association', function (editor, url) {
    // ...
  });
})(tinymce);

2. 注册插件

接下来，我们需要将插件注册到 TinyMCE 中。这可以通过在 tinymce.init() 函数中添加 plugins 选项来实现。

tinymce.init({
  selector: '#editor',
  plugins: 'content-association',
  // ...
});

3. 定义插件功能

在插件文件中，我们需要定义插件的功能。插件的功能由一个 init() 函数来实现。init() 函数将在编辑器初始化时被调用。

// content-association.js
(function (tinymce) {
  tinymce.PluginManager.add('content-association', function (editor, url) {
    // ...

    editor.on('init', function () {
      // ...
    });
  });
})(tinymce);

4. 创建输入框和下拉列表

在 init() 函数中，我们需要创建一个输入框和一个下拉列表。输入框用于用户输入关键词进行搜索，下拉列表用于展示搜索结果。

// content-association.js
(function (tinymce) {
  tinymce.PluginManager.add('content-association', function (editor, url) {
    // ...

    editor.on('init', function () {
      // 创建输入框
      var input = document.createElement('input');
      input.setAttribute('type', 'text');
      input.setAttribute('placeholder', '输入关键词');
      input.addEventListener('input', function () {
        // ...
      });

      // 创建下拉列表
      var select = document.createElement('select');
      select.setAttribute('multiple', 'multiple');
      select.style.display = 'none';

      // ...
    });
  });
})(tinymce);

5. 发送搜索请求

当用户在输入框中输入关键词后，我们需要向后端发送一个搜索请求，以获取知识点的数据。

// content-association.js
(function (tinymce) {
  tinymce.PluginManager.add('content-association', function (editor, url) {
    // ...

    editor.on('init', function () {
      // ...

      input.addEventListener('input', function () {
        // 获取输入框中的关键词
        var keyword = input.value;

        // 向后端发送搜索请求
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/search?keyword=' + keyword, true);
        xhr.onload = function () {
          // 解析搜索结果
          var results = JSON.parse(xhr.responseText);

          // 清空下拉列表
          select.innerHTML = '';

          // 将搜索结果添加到下拉列表中
          for (var i = 0; i < results.length; i++) {
            var option = document.createElement('option');
            option.setAttribute('value', results[i].id);
            option.innerHTML = results[i].name;
            select.appendChild(option);
          }

          // 显示下拉列表
          select.style.display = 'block';
        };
        xhr.send();
      });
    });
  });
})(tinymce);

6. 关联知识点

当用户在下拉列表中选择一个知识点后，我们需要将该知识点与编辑器中的内容关联起来。

// content-association.js
(function (tinymce) {
  tinymce.PluginManager.add('content-association', function (editor, url) {
    // ...

    editor.on('init', function () {
      // ...

      select.addEventListener('change', function () {
        // 获取选中的知识点
        var knowledgePoints = [];
        for (var i = 0; i < select.selectedOptions.length; i++) {
          knowledgePoints.push(select.selectedOptions[i].value);
        }

        // 将知识点与编辑器中的内容关联起来
        editor.setContent(editor.getContent() + '<p>知识点：' + knowledgePoints.join(',') + '</p>');

        // 隐藏下拉列表
        select.style.display = 'none';
      });
    });
  });
})(tinymce);