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

[before]and[after]を<p class"myclass">andに置き換えたかったの</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

3

CKEDITOR.style 構文が CKEditor 4 で (明らかに) 変更されたことに注意してください。editor.applyStyle() を使用するには (ネストされた HTML を大量に取得しないように、場合によってはこれが望ましい)、editor.applyStyle()質問の 2 番目の例のスタンザを次のように変更します。

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

キーがすべて小文字になっていることに注意してください。

彼らがこれを文書化してくれると本当に助かります- 現時点でそこにある唯一の文書は「TODO...」と書かれています!

于 2014-02-20T13:05:39.753 に答える
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);
  }
}

ここでコンテンツはテキストエリアIDです

于 2014-06-17T04:35:10.257 に答える
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 に答える