如何在TinyMCE编辑器中实现从数据库自动补全插入页面链接？

核心思路 #

通过自定义TinyMCE插件结合jQuery UI Autocomplete，实现点击插入链接按钮后，在弹窗输入框中实时搜索数据库页面，选择目标项后自动生成对应链接插入编辑器。

实现步骤 #

1. 编写自定义TinyMCE插件

该插件会添加一个「插入页面链接」按钮，点击后弹出带自动补全功能的输入框：

tinymce.PluginManager.add('page_link_autocomplete', function(editor) {
  // 添加按钮到工具栏
  editor.ui.registry.addButton('page_link', {
    icon: 'link',
    tooltip: '插入页面链接',
    onAction: function() {
      // 弹窗HTML结构
      const dialogHtml = `
        <div style="padding: 10px;">
          <label>搜索页面:</label>
          <input type="text" id="page-search-input" style="width: 100%; margin-top: 8px;" placeholder="输入页面标题关键词...">
        </div>
      `;

      // 打开弹窗
      editor.windowManager.open({
        title: '插入页面链接',
        body: {
          type: 'panel',
          items: [{
            type: 'htmlpanel',
            html: dialogHtml
          }]
        },
        buttons: [
          { type: 'cancel', text: '取消' },
          { type: 'submit', text: '插入链接', disabled: true, id: 'insert-link-btn' }
        ],
        onSubmit: function(api) {
          const selectedPage = $('#page-search-input').data('selected-page');
          if (selectedPage) {
            // 插入格式化后的链接到编辑器
            editor.insertContent(`<a href="${selectedPage.url}">${selectedPage.title}</a>`);
          }
          api.close();
        }
      });

      // 绑定Autocomplete到输入框
      $('#page-search-input').autocomplete({
        source: function(request, response) {
          // Ajax请求后端接口获取匹配页面
          $.ajax({
            url: '/api/search-pages', // 替换为你的后端接口地址
            method: 'GET',
            data: { keyword: request.term },
            success: function(data) {
              // 转换为Autocomplete所需格式
              const formattedData = data.map(page => ({
                label: page.title,
                value: page.title,
                url: page.url
              }));
              response(formattedData);
            }
          });
        },
        minLength: 2, // 输入至少2个字符触发搜索
        select: function(event, ui) {
          // 保存选中的页面数据
          $('#page-search-input').data('selected-page', ui.item);
          // 启用插入按钮
          $('#insert-link-btn').removeAttr('disabled');
        }
      });
    }
  });

  return {
    getMetadata: function() {
      return { name: 'Page Link Autocomplete' };
    }
  };
});

2. 后端接口实现（示例：PHP）

后端接收搜索关键词，查询数据库并返回匹配的页面列表：

<?php
// /api/search-pages
header('Content-Type: application/json');

$keyword = $_GET['keyword'] ?? '';
if (empty($keyword)) {
  echo json_encode([]);
  exit;
}

// 替换为你的实际数据库查询逻辑
$pages = [
  ['title' => '首页', 'url' => '/home'],
  ['title' => '产品列表', 'url' => '/products'],
  ['title' => '关于我们', 'url' => '/about'],
];

// 筛选匹配关键词的页面
$matchedPages = array_filter($pages, function($page) use ($keyword) {
  return strpos(strtolower($page['title']), strtolower($keyword)) !== false;
});

echo json_encode(array_values($matchedPages));
?>

3. 初始化TinyMCE时加载插件

在编辑器配置中引入自定义插件并添加工具栏按钮：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'page_link_autocomplete link',
  toolbar: 'page_link | bold italic underline',
  // 其他TinyMCE配置项...
});

关键注意事项 #

• 确保页面已引入jQuery和jQuery UI Autocomplete的JS/CSS资源
• 后端接口需做好参数校验与SQL注入防护
• 可根据需求调整minLength参数修改触发搜索的字符数
• 若需在编辑器输入过程中直接触发补全，可修改插件逻辑，监听编辑器input事件并匹配特定前缀（如[link:）后唤起Autocomplete

内容的提问来源于stack exchange，提问作者Avadan