Как обернуть выделенный текст в ckeditor

Дубликат см. Stackoverflow: CKEditor Selection wrapping

editor.applyStyle(new CKEDITOR.style({Element : 'p', Attributes : { class : 'Myclass' }, Styles : { color : '#ff0000','font-family' : 'Courier' } ));

Этот фрагмент кода гарантирует, что если у вас есть выбор нескольких уровней блоков, то вы сохраните одну и ту же структуру. (Если вы сделаете свой P. myclass встроенным вне курса).

<p>This is a paragraph. And this is </p><p> Selected text.</p>

Этот пример будет объединен и выведен в виде:

<p>This is a paragraph. </p><p class="myClass">And this is  Selected text.</p>

Но этот пример:

<div>This is a paragraph. And this is</div><div>  Selected text.</div>

Этот пример будет объединен и выведен в виде:

<div>This is a paragraph. <P class="myclass">And this is</p></div><div><P class="myclass">  Selected text.</p></div>

Стоит отметить CKEDITOR.синтаксис стиля (по-видимому) изменился в CKEditor 4; чтобы использовать редактор.applyStyle () (что предпочтительнее в некоторых случаях, чтобы вы не получили кучу вложенного HTML), измените строфу editor.applyStyle() во втором примере вопроса на:

editor.applyStyle(new CKEDITOR.style({
        element : 'p', 
        attributes : { class : 'Myclass' }, 
        styles : { color : '#ff0000','font-family' : 'Courier'} 
      })
);

Обратите внимание, что все клавиши теперь записаны в нижнем регистре.

Было бы действительно полезно, если бы они задокументировали это-единственная документация там на данный момент говорит "TODO..."!

Он работает как для изображения, так и для текста в ckeditor

var selection = CKEDITOR.instances['content'].getSelection();
if (selection.getType() == CKEDITOR.SELECTION_ELEMENT) {
  var selectedContent = selection.getSelectedElement().$.outerHTML;
} else if (selection.getType() == CKEDITOR.SELECTION_TEXT) {
  if (CKEDITOR.env.ie) {
    selection.unlock(true);
    selectedContent = selection.getNative().createRange().text;
  } else {
    selectedContent = selection.getNative();
    console.log("The selectedContent is: " + selectedContent);
  }
}

Здесь содержание-textarea id

Если вы хотите универсальное решение, которое работает как с выделением текста, так и с любым количеством элементов, то это будет работать:

var selectedHtml = "";
var selection = editor.getSelection();
if (selection) {
    selectedHtml = getSelectionHtml(selection);
}
editor.insertHtml('something' + selectedHtml + 'something');

Вам понадобятся две дополнительные функции:

/**
    Get HTML of a range.
*/
function getRangeHtml(range) {
    var content = range.extractContents();
    // `content.$` is an actual DocumentFragment object (not a CKEDitor abstract)
    var children = content.$.childNodes;
    var html = '';
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (typeof child.outerHTML === 'string') {
            html += child.outerHTML;
        } else {
            html += child.textContent;
        }
    }
    return html;
}
/**
    Get HTML of a selection.
*/
function getSelectionHtml(selection) {
    var ranges = selection.getRanges();
    var html = '';
    for (var i = 0; i < ranges.length; i++) {
        html += getRangeHtml(ranges[i]);
    }
    return html;
}

Обратите внимание, что в CKEditor 4.5 у вас действительно есть функция getHtml, поэтому getRangeHtml можно упростить с помощью content.getHtml(). Смотрите documentFragment doc.