Пользовательский редактор кендо, как изменить выбор пользователя с помощью объекта диапазона - PullRequest
Новая
       47

Пользовательский редактор кендо, как изменить выбор пользователя с помощью объекта диапазона

0 голосов
/ 26 мая 2018

Kendo UI 2015.2.805 Kendo UI Editor для Jacascript

Я хочу расширить редактор Kendo UI, добавив пользовательский инструмент, который преобразует выбранный пользователем блок, охватывающий два или более абзаца, в блок с одним интерваломтекст.Это можно сделать, найдя все внутренние p-теги и преобразовав их в br-теги, стараясь не изменять первый или последний тег.

Моя проблема связана с объектом диапазона.

Получениедиапазон прост: 

var range = editor.getRange();

Объект диапазона имеет начальный и конечный контейнеры, а также начальное и конечное смещение (внутри этого контейнера).Я могу получить доступ к тексту (без разметки) 

console.log(range.toString());

Как ни странно, другие примеры, которые я видел, включая рабочие примеры, показывают, что 

console.log(range);

будет выводить текст, однако это неработать в моем проекте, я просто получаю слово «Range», который является типом объекта.Это касается меня.

Однако все, что мне действительно нужно, - это смещение начала и конца в разметке редактора (editor.value ()), тогда я могу найти и изменить p на br.

Я прочитал документацию telerik и объяснение html-диапазонов на указанном сайте quirksmode, и хотя в информативном виде ничего не показывает, как найти диапазон в тексте (что мне кажется довольно простым).

Я подозреваю, что я 'м упуская что-то простое.

Учитывая объект диапазона, как я могу найти начальное и конечное смещение в содержимом редактора?

РЕДАКТИРОВАТЬ: После дополнительных исследований это выглядит гораздо более сложным, чем я ожидал.Кажется, я должен иметь дело с диапазоном и / или объектами выделения, а не напрямую с содержимым редактора.Разумнее, чем я придумал объект диапазона по причинам, которые я не могу понять.

Вот что у меня есть: 

var range = letterEditor.editor.getRange();

var divSelection;
divSelection = range.cloneRange();  
//cloning may be needless extra work...

//here manipulate the divSelection to how I want it.
//divSeletion is a range, not sure how to manipulate it

var sel = letterEditor.editor.getSelection()
sel.removeAllRanges();
sel.addRange(divSelection);

РЕДАКТИРОВАТЬ 2:

Основано на Решение Тима Дауна Я придумал этот простой тест: 

var html;
var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {
    var container = document.createElement("div");
    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
    }
    html = container.innerHTML;
}

html = html.replace("</p><p>", "<br/>")

var range = letterEditor.editor.getRange();
range.deleteContents();
var div = document.createElement("div");
div.innerHTML = html;
var frag = document.createDocumentFragment(), child;
while ((child = div.firstChild)) {
    frag.appendChild(child);
}
range.insertNode(frag);

Первая часть, получающая выбор html, работает отлично, вторая часть также работает, однако редактор вставляет теги

вокруг всех строк, поэтому результат неверен;дополнительные строки, включая фрагменты выделения.

Редактор поддерживает всплывающее окно просмотра html, которое отображает содержимое редактора в виде html и позволяет редактировать html.Если я изменю целевые p-теги на br, я получу желаемый результат.(Редактор поддерживает br как перевод строки по умолчанию против p, но я хочу, чтобы p большую часть времени).То, что я могу редактировать html с помощью инструмента просмотра html, дает мне понять, что это возможно, мне просто нужно определить начало и конец выделения в содержимом редактора, тогда простая текстовая замена с помощью регулярного выражения в значении редактора поможет.

Редактировать 3:

Обыскивать kendo.all.max.js Я обнаружил, что нажатие Shift + Enter создает тег br вместо ap для перевода строки.Я собирался расширить его, чтобы сделать это как обходной путь для инструмента с одним пробелом.Мне все еще хотелось бы найти решение этой проблемы, если кто-нибудь знает, но сейчас я поручаю пользователям сдвигать-ввод для отдельных интервалов текста.

1 Ответ

0 голосов
/ 02 июня 2018

Это сделает это.Использует код Тима Дауна, чтобы получить HTML.RegEx, вероятно, можно сделать более эффективным.«Трюк» использует split = false в insertHtml. 

var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {

    var container = document.createElement("div");
    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
    }
    var block = container.innerHTML;

    var rgx = new RegExp(/<br class="k-br">/gi);
    block = block.replace(rgx, "");

    rgx = new RegExp(/<\/p><p>/gi);
    block = block.replace(rgx, "<br/>");

    rgx = new RegExp(/<\/p>|<p>/gi);
    block = block.replace(rgx, "");

    letterEditor.editor.exec("insertHtml", { html: block, split: false });

}
...