javascript - 如何在ckeditor中包装选定的文本

Question

我想将选定的单词包装在 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'
            }); 
        } 
    });
})();

我想替换 [before]和 [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>

这不是我想要的。

Answer 1

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 部分。