Non riesco ad aggiungere il pulsante Sorgente alla barra degli strumenti di CKEditor 4

Question

Non riesco ad aggiungere il pulsante Sorgente alla barra degli strumenti di CKEditor 4. Ho appena scaricato il nuovo CKEditor oggi.

che sto utilizzando un oggetto di configurazione chiamato oConfig:

oConfig.toolbar = 'Custom'; 
oConfig.toolbar_Custom = [ 
    ['Bold', 'Source', 'Italic'] 
]; 

La barra degli strumenti presenta con solo i pulsanti Grassetto e Corsivo. This example dai documenti di CKEditor mi dice che dovrebbe funzionare.

Answer 1

Ci sono due motivi per cui può accadere:

1. aver scaricato il pacchetto di base, in cui il plugin sourcearea non è incluso.

2. Si sta utilizzando CKEditor in modalità inline. La modalità sorgente non è ancora disponibile in modalità in linea.

Answer 2

Qui è un plugin che ho fatto:

Prima di tutto, all'interno ckeditor/plugins/ creare una nuova cartella chiamata "HtmlSource", al suo interno creare un file chiamato "plugin.js" e all'interno di questo file incollare il codice qui sotto:

//-----------------------------Start Plugin Code------------------------- 



plugInName = 'htmlSource'; 

CKEDITOR.plugins.add(plugInName, 
{ 
    init: function (editor) { 

    editor.addCommand('htmlDialog', new CKEDITOR.dialogCommand('htmlDialog')); 
    editor.ui.addButton(plugInName, { 
     label: 'Html Source', 
     icon: 'http://www.example.com/images/btn_html.png', 
     command: 'htmlDialog' 
    }); 

    CKEDITOR.dialog.add('htmlDialog', function (editor) { 
     return { 
      title: 'Fuente Html', 
      minWidth: 600, 
      minHeight: 400, 
      contents: [ 
         { 
          id: 'general', 
          label: 'Settings', 
          elements: 
          [ 
          // UI elements of the Settings tab. 
           { 
           type: 'textarea', 
           id: 'contents', 
           rows: 25, 
           onShow: function() { 
            this.setValue(editor.container.$.innerHTML); 

           }, 
           commit: function (data) {    //--I get only the body part in case I paste a complete html 
            data.contents = this.getValue().replace(/^[\S\s]*<body[^>]*?>/i, "").replace(/<\/body[\S\s]*$/i, ""); 
           } 

          } 
           ] 
         } 
        ], 

      onOk: function() { 
       var data = {}; 
       this.commitContent(data); 
       $(editor.container.$).html(data.contents); 
      }, 
      onCancel: function() { 
       // console.log('Cancel'); 
      } 
     }; 
    }); 
} 


}); 

//--------------------Plugin Code Ends Here-------------------- 

prega di notare che c'è un parametro chiamato icona in cui è necessario impostare l'URL del pulsante Plugin Immagine, ho appena messo un esempio url ('http://www.example.com/images/btn_html.png') è necessario utilizzare uno valido per vedere il pulsante del plugin.

Per impostare questo plugin nella barra degli strumenti ckeditor, è necessario configurarlo all'interno del file config.js, ad esempio:

CKEDITOR.editorConfig = function (config) { 
    config.plugins = 
    'htmlSource,' + //Here is the plugin 
    'about,' + 
    'a11yhelp,' + 
    'basicstyles,' + 
    'bidi,' + 
    .....; 
config.toolbar = 'Full'; //Add the plugin to the full toolbar 

config.toolbar_Full =  //Note that our plugin will be the first button in the toolbar 
     [ 
     ['htmlSource', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'], 
     ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'], 
     ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], 
     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], 
     ['BidiLtr', 'BidiRtl'], 
     '/', 
     ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], 
     ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'], 
     ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], 
     ['Link', 'Unlink', 'Anchor'], 
     ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], 
     '/', 
     ['Styles', 'Format', 'Font', 'FontSize'], 
     ['TextColor', 'BGColor'], 
     ['Maximize', 'ShowBlocks', '-', 'About'] 
    ]; 
}; 

So che questo sta funzionando, quindi se avete qualche problema la prego di dirmi.

Answer 3

per me, è aiutato da usare:

config.extraPlugins = 'htmlSource'; 

mie risposte precedenti sono stati cancellati per la ragione di iper-igiene; anche se io se potrebbe aiutare qualcuno ..

Answer 4

Per CKEditor 4.1.1, una combinazione delle due precedenti risposte funzionato per me, anche se ho dovuto fare alcuni piccoli aggiustamenti. La parte che dice "--- Start Plugin here ---" sono riuscito a copiare così com'è. Per le opzioni di configurazione, ho dovuto usare

CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins". 
CKEDITOR.config.toolbar = 'Full'; 
CKEDITOR.config.toolbar_Full = ...; 

invece di

CKEDITOR.editorConfig = function (config) { ... 

Infine, questo è stato tutto fatto in modalità inline con un'installazione plain vanilla, vale a dire che non c'era bisogno di scaricare alcun plugin aggiuntivi per far funzionare questo

Answer 5

Googler futuro, CKEditor v4.2 ora c'è un plugin per visualizzare il codice sorgente in modalità di modifica in linea.

http://ckeditor.com/addon/sourcedialog

Answer 6

Sto usando il plugin di Julio con la versione 4, e aveva bisogno di effettuare una regolazione per evitare questo JS errore:

TypeError: $(...).html is not a function

ho scambiato questa linea:

$(editor.container.$).html(data.contents); 

con questo:

// See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData 
editor.setData(
    data.contents, 
    function() { 
     this.checkDirty(); 
    } 
); 

La mia ipotesi è la soluzione di Julio richiede jQuery, e il mio approccio è l'approccio CKEditor (o almeno più vicino ad esso!).