3

В contenteditable регионах, если вставить элемент с атрибутом URL, в некоторых браузерах он преобразует URL из относительной к абсолютной ,Как обрабатывать URL относительный/абсолютный «глюк» в contenteditable при копировании и вставке

Я прочитал некоторые сообщения об ошибках, которые утверждают, что они исправлены в последней версии, но это не так.

я бросил вместе эту скрипку, чтобы продемонстрировать: Hurray for Demos!

Это там, это некрасиво, и мне интересно, что это лучший способ, чтобы исправить это.

  1. 1-ая идея, которая приходит на ум onpaste, найти все anchors в текущем узле и parse it with regex. Не идеальный, я полагаю, но это может быть эффективным.

  2. ???

  3. ???

Я действительно хотел бы они просто оставить вещи в покое и не создавать так много проблем, связанных с браузера contenteditable, , но я думаю, что бы сделать его слишком легко.

Любые мысли о наилучшем способе решения этой проблемы?

ответ

1

CKEditor, прежде чем позволить браузеру разбить данные, копирует все src, name и href атрибуты для data-cke-saved-src|href атрибутов. К сожалению, поскольку данные представляют собой строку, это нужно сделать с помощью регулярного выражения. Код можно найти здесь: /core/htmldataprocessor.js#L772-L783.

var protectElementRegex = /<(a|area|img|input|source)\b([^>]*)>/gi, 
    // Be greedy while looking for protected attributes. This will let us avoid an unfortunate 
    // situation when "nested attributes", which may appear valid, are also protected. 
    // I.e. if we consider the following HTML: 
    // 
    // <img data-x="&lt;a href=&quot;X&quot;" /> 
    // 
    // then the "non-greedy match" returns: 
    // 
    // 'href' => '&quot;X&quot;' // It's wrong! Href is not an attribute of <img>. 
    // 
    // while greedy match returns: 
    // 
    // 'data-x' => '&lt;a href=&quot;X&quot;' 
    // 
    // which, can be easily filtered out (#11508). 
    protectAttributeRegex = /([\w-]+)\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|(?:[^ "'>]+))/gi, 
    protectAttributeNameRegex = /^(href|src|name)$/i; 

function protectAttributes(html) { 
    return html.replace(protectElementRegex, function(element, tag, attributes) { 
     return '<' + tag + attributes.replace(protectAttributeRegex, function(fullAttr, attrName) { 
      // Avoid corrupting the inline event attributes (#7243). 
      // We should not rewrite the existed protected attributes, e.g. clipboard content from editor. (#5218) 
      if (protectAttributeNameRegex.test(attrName) && attributes.indexOf('data-cke-saved-' + attrName) == -1) 
       return ' data-cke-saved-' + fullAttr + ' data-cke-' + CKEDITOR.rnd + '-' + fullAttr; 

      return fullAttr; 
     }) + '>'; 
    }); 
} 

Затем, при обработке HTML взяты из редактируемого элемента, data-cke-saved-* атрибуты переопределить оригинальные.

+0

Eesh, это довольно круто. Интересный подход. Я построил простую функцию, которая просто находит базовый url и удаляет его. Угадайте, что мой подход требует работы, поскольку, как вы говорите, изображение использует 'src' not' href'. Спасибо за вход! –

+0

Иногда у меня такое ощущение, что все, что CKEditor делает, это обходные ошибки браузера, причуды и несоответствия;). – Reinmar

+0

- и обширный список. Я также обращаюсь к вашему редактору и TinyMCE, но есть так много * лишних *, что он меня отключает (то же самое касается почти всех сторонних программ/плагинов). Разработка с нуля .. это было образовательным, чтобы сказать наименее :) –

 Смежные вопросы

  • Нет связанных вопросов^_^