如何将CKEditor链接元素添加的链接URL显示为纯文本

看起来你是想把通过CKEditor链接元素添加的URL以纯文本形式展示，而不是可点击的链接。结合你给出的代码片段，我给你调整几种适配不同场景的实现方式：

场景1：直接在模板字符串中保存纯文本URL #

如果你只是想让最终生成的medsims_val里，链接URL以纯文本字符串的形式存在，那可以优化现有代码的重复逻辑，直接完成占位符替换：

// 初始化模板字符串
var medsims_val = '{external_link{imageurl:"[medsims_img_url]", linkurl:"[medsims_link]", expiry_date:"[medsims_link_expiry]",caption:"[medsims_caption_text]"}}';

// 批量处理字段替换，避免重复代码
const fieldMap = [
  { placeholder: "[medsims_img_url]", fieldName: "medsims_img_url" },
  { placeholder: "[medsims_link]", fieldName: "medsims_link" },
  { placeholder: "[medsims_link_expiry]", fieldName: "medsims_link_expiry" },
  { placeholder: "[medsims_caption_text]", fieldName: "medsims_caption_text" }
];

fieldMap.forEach(item => {
  const rawVal = this.getValueOf('info', item.fieldName);
  const processedVal = rawVal ? rawVal.trim() : '';
  medsims_val = medsims_val.replace(item.placeholder, processedVal);
});

替换完成后，medsims_val里的linkurl字段就会是纯文本的URL，不会被解析为可点击链接。

场景2：在CKEditor编辑器内插入纯文本URL #

如果你的需求是用户在CKEditor里插入链接时，编辑器自动把链接转换成纯文本URL显示，那可以监听编辑器的插入事件，替换链接元素为文本节点：

// 假设已初始化CKEditor实例为editor
editor.on('insertElement', function(evt) {
  const insertedElement = evt.data;
  // 判断插入的是链接元素
  if (insertedElement.is('a')) {
    // 获取链接的URL地址
    const targetUrl = insertedElement.getAttribute('href');
    // 创建纯文本节点
    const textNode = editor.document.createText(targetUrl);
    // 替换原链接元素为文本节点
    insertedElement.replaceWith(textNode);
    evt.cancel(); // 取消原插入操作
  }
});

这样用户插入链接后，编辑器里只会显示纯文本的URL，不会出现可点击的链接样式。

场景3：渲染时确保URL为纯文本 #

如果是后续把medsims_val渲染到页面时，不想让URL被浏览器解析成可点击链接，那可以转义URL里的特殊字符，让浏览器把它当成纯文本处理：

// 转义HTML特殊字符的工具函数
function escapeHtml(text) {
  return text
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

// 替换占位符时同时转义URL
fieldMap.forEach(item => {
  const rawVal = this.getValueOf('info', item.fieldName);
  const processedVal = rawVal ? escapeHtml(rawVal.trim()) : '';
  medsims_val = medsims_val.replace(item.placeholder, processedVal);
});

之后即使使用innerHTML渲染内容，URL也会以纯文本形式展示，不会被解析成链接。

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