如何在 ckeditor 中换行所选文本

exec : function( editor ) {
  var selected_text = editor.getSelection().getSelectedText(); // Get Text
  var newElement = new CKEDITOR.dom.element("p");              // Make Paragraff
  newElement.setAttributes({style: 'myclass'})                 // Set Attributes
  newElement.setText(selected_text);                           // Set text to element
  editor.insertElement(newElement);                            // Add Element
}

这将修复它..如您所见，这是执行部分。

重复参见 堆栈溢出：Ckeditor 选择包装

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.style 语法在 CKEditor 4 中(显然(发生了变化; 要使用 editor.applyStyle(((在某些情况下更可取，这样您就不会得到一堆嵌套的 HTML(，请将问题的第二个示例中的editor.applyStyle()节更改为：

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

请注意，现在的键都是小写的。

如果他们能记录下来，那将非常有帮助——目前唯一的文件说"TODO......"！

如果您想要一个既适用于选择文本又适用于任意数量元素的通用解决方案，那么这将起作用：

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() 来简化。请参阅文档片段文档。

它适用于 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);
  }
}

此处内容是文本区域 ID

此代码示例为CK编辑器添加带有按钮的插件，该编辑器将html与类"vip-content"包装在一起。这处理每种类型的元素：在文本内单击，单击元素(例如img(或选择某些元素(某些代码行(。

(function () {
const WRAP_CONTENT_CLASS = 'vip-content';
function getSelectionHtml(selection) {
    var ranges = selection.getRanges();
    var html = '';
    for (var i = 0; i < ranges.length; i++) {
        html += ranges[i].extractContents().getHtml();
    }
    return html;
}
CKEDITOR.plugins.add('wrapcontent', {
    init: function (editor) {
        editor.addCommand('WrapContent', {
            exec: function () {
                var selection = editor.getSelection();
                var div = new CKEDITOR.dom.element('div').addClass(WRAP_CONTENT_CLASS);
                // Process element
                if (selection.getSelectedElement()) {
                    div.append(selection.getSelectedElement());
                    editor.insertElement(div);
                    return;
                }
                if (selection.getNative().type === 'Caret') {
                    editor.applyStyle(new CKEDITOR.style({
                        element: 'div',
                        attributes: {class: WRAP_CONTENT_CLASS},
                    }));
                } else {
                    var html = getSelectionHtml(selection);
                    if (html !== '') {
                        div.setHtml(html);
                        editor.insertElement(div);
                    }
                }
            }
        });
        editor.ui.addButton('WrapContent', {
            label: 'Wrap content',
            toolbar: 'insert',
            command: 'WrapContent',
            icon: this.path + 'icons/icon.png'
        });
    }
});
})();

我发现这种方式可以更好地获得样式的添加-删除 efecto：

CKEDITOR.plugins.add('my_style', {
    
    init: function (editor) {
        'use strict';
        editor.addCommand('my_style', {
            exec: function (editor) {
                var myStyle = new CKEDITOR.style({
                    element: 'span',
                    attributes: {class: 'my_style'}
                });
                if (myStyle.checkActive(editor.elementPath(), editor)) {
                    editor.removeStyle(myStyle);
                } else {
                    editor.applyStyle(myStyle);
                }
            }
        });
    }
});