Cách quấn văn bản đã chọn trong ckeditor

Question

Tôi muốn bọc các từ đã chọn trong CKEditor trong phần tử <p>.

Từ:

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

tôi thấy một số mã:

(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' 
      }); 
       } 
    }); 
})(); 

tôi muốn thay thế [before] và [after] với <p class"myclass"> và </p> nhưng nó doesn' t làm việc.

Tôi là một người mới trong JS/Jquery. Tôi hy vọng bạn có thể làm sáng tỏ điều đó cho tôi.

CHỈNH SỬA: Từ trả lời của 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' 
     }); 
      } 
    }); 
})(); 

Đoạn mã trên kết thúc tốt đẹp các văn bản đã chọn/từ trong một phần tử <span> vì một lý do không rõ.

Ví dụ:

Từ ...

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

Để ...

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

Đây không phải là những gì tôi muốn.

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 
} 

Điều này sẽ khắc phục sự cố .. Đây là phần Exec như bạn có thể thấy.

Answer 2

Duplicate Stackoverflow: Ckeditor Selection wrapping

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

Đoạn mã này làm cho chắc chắn rằng nếu bạn có nhiều lựa chọn mức block, rằng bạn sẽ giữ cho các cấu trúc cùng xem. (Nếu bạn làm cho offcourse p.myclass inline).

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

ví dụ này sẽ được sáp nhập và đầu ra như:

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

Nhưng ví dụ này:

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

ví dụ này sẽ được sáp nhập và đầu ra như:

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

Answer 3

Đáng chú ý là cú pháp kiểu CKEDITOR.style (dường như) đã thay đổi trong CKEditor 4; sử dụng editor.applyStyle() (nào là thích hợp hơn trong một số trường hợp, do đó bạn không nhận được một bó HTML lồng nhau), thay đổi editor.applyStyle() đoạn thơ trong ví dụ thứ hai của câu hỏi để:

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

Chú ý cách các phím được tất cả chữ thường bây giờ.

Sẽ thực sự hữu ích nếu họ muốn document điều này - tài liệu duy nhất tại thời điểm này nói "TODO ..."!

Answer 4

Nó đang làm việc cho cả hai hình ảnh và văn bản trong 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); 
    } 
} 

đây nội dung là textarea id

Answer 5

Trong trường hợp bạn muốn có một giải pháp phổ biến mà làm việc cả hai chọn văn bản và bất kỳ số lượng các yếu tố sau đó điều này sẽ công việc:

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

Bạn sẽ cần hai chức năng bổ sung:

/** 
    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; 
} 

Lưu ý rằng trong CKEditor 4.5 bạn thực sự có chức năng getHtml vì vậy getRangeHtml có thể được đơn giản hóa bằng cách sử dụng content.getHtml(). Xem documentFragment doc.