9

我想将选定的单词包装CKEditor在一个<p>元素中。

从：

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

到：

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

我找到了一些代码：

( function() {
    CKEDITOR.plugins.add( 'qna', { 
        init: function( editor ) {
            editor.addCommand( 'insertQnA', { 
                exec : function( editor ) {    
                    if(CKEDITOR.env.ie) {
                        editor.getSelection().unlock(true); 
                            var selected_text = editor.getSelection().getNative().createRange().text; 
                    } else { 
                        var selected_text = editor.getSelection().getNative();
                    }
                    editor.insertHtml('[before]' + selected_text + '[after]'); 
                } 
            }); 
            editor.ui.addButton( 'qna', { 
                label: 'Insert QnA', 
                command: 'insertQnA', 
                icon: this.path + 'images/qna.png'
            }); 
        } 
    });
})();

我想用 and 替换[before]and[after]但<p class"myclass">它</p>不起作用。

我是 JS/Jquery 的新手。我希望你能给我一些启示。

编辑：来自 Spon 的回复。

( function() {
  CKEDITOR.plugins.add( 'qna', { 
    init: function( editor ) {
      editor.addCommand( 'insertQnA', { 
        exec : function( editor ) {    
          editor.applyStyle(new CKEDITOR.style({
            Element : 'p', 
            Attributes : { class : 'Myclass' }, 
            Styles : { color : '#ff0000','font-family' : 'Courier'} 
          }));
        } 
      }); 
      editor.ui.addButton( 'qna', { 
        label: 'Insert QnA', 
        command: 'insertQnA', 
        icon: this.path + 'images/question.png'
      }); 
    } 
  });
})();

<span>上面的代码出于某种未知原因将选定的文本/单词包装在一个元素中。

例子：

从...

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

到...

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

这不是我想要的。

4

7 回答 7

23 
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
}

这将解决它。如您所见，这是 Exec 部分。

于 2013-04-03T09:47:05.503 回答
4

重复请参阅Stackoverflow：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>
于 2013-04-03T06:37:22.347 回答
3

值得注意的是 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 ...”！

于 2014-02-20T13:05:39.753 回答
2

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

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

于 2017-05-30T12:38:26.253 回答
1

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

于 2014-06-17T04:35:10.257 回答
0

此代码示例为 CK 编辑器添加带有按钮的插件，该编辑器使用类“vip-content”包装 html。它处理每种类型的元素：单击文本内部、单击元素（例如 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'
        });
    }
});
})();
于 2021-01-16T14:25:27.067 回答
0

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

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);
                }
            }
        });
    }
});
于 2021-04-02T00:46:49.413 回答