CKEditor 会将根附加到我的图像链接中

作者:编程家 分类: php 时间:2025-11-22

CKEditor 是一个常用的富文本编辑器，它提供了许多功能来方便用户编写和编辑文章。然而，有时候我们在使用 CKEditor 插入图像链接时会遇到一个问题，那就是 CKEditor 会将根附加到我们的图像链接中。

这个问题通常出现在使用相对路径来引用图像的情况下。当我们在 CKEditor 中插入一个图像链接时，CKEditor 会自动将链接的根路径添加到链接中，导致链接无法正确显示图片。

举个例子，假设我们有一个图片文件夹位于网站根目录下的 "images" 文件夹中，我们想在文章中插入一张图片。我们可以使用相对路径来引用这张图片，例如：`My Image`。然而，当我们将这个链接插入到 CKEditor 中时，CKEditor 会自动将根路径添加到链接中，例如：`My Image`。

这个问题可能会导致图片无法正确显示，因为 CKEditor 默认会将根路径解释为网站的根目录，而不是相对于当前页面的根目录。为了解决这个问题，我们需要手动修改 CKEditor 的配置，让它不自动添加根路径。

具体的解决方法是，在 CKEditor 的配置文件中添加以下代码：

javascript
CKEDITOR.on('instanceReady', function (ev) {
  ev.editor.dataProcessor.htmlFilter.addRules({
    elements: {
      $: function (element) {
        // Check if the element is an  tag
        if (element.name === 'img') {
          // Remove the root path from the image source
          element.attributes.src = element.attributes.src.replace(/^\//g, '');
        }
        return element;
      }
    }
  });
});

这段代码会在 CKEditor 实例就绪后执行，它会遍历所有的 `` 标签并移除链接中的根路径。这样，我们在插入图像链接时就不会再遇到 CKEditor 自动添加根路径的问题了。

案例代码：

以下是一个完整的案例代码，演示了如何使用 CKEditor 并解决根附加问题：

html
  
  CKEditor 图像链接根附加问题
  
  
CKEditor 图像链接根附加问题

在这个案例中，我们首先引入了 CKEditor 的 JavaScript 文件，然后在页面中放置了一个 `