Nie mogę dodać przycisku Źródło do paska narzędzi CKEditor 4

Question

Mam problem z dodaniem przycisku Źródło do paska narzędzi CKEditor 4. Właśnie pobrałem nowy CKEditor dzisiaj.

Używam obiekt konfiguracyjny o nazwie oConfig:

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

Pasek pokazuje się tylko z pogrubienie i kursywa przycisków. This example z dokumentacji CKEditor mówi mi, że powinno działać.

Answer 1

Istnieją dwa powody, dla których może to być dzieje:

1. pobraniu pakietu podstawowego, w którym wtyczki sourcearea nie jest włączone.

2. Używasz CKEditor w trybie inline. Tryb źródłowy nie jest jeszcze dostępny w trybie inline.

Answer 2

Oto plugin Zrobiłem:

Przede wszystkim wewnątrz ckeditor/plugins/ utworzyć nowy folder o nazwie „htmlSource”, wewnątrz niego utworzyć plik o nazwie „plugin.js” i wewnątrz tego pliku wklej poniższy kod:

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

Proszę zauważyć, że nie jest to parametr zwany ikona gdzie trzeba ustawić adres URL wtyczki przycisk Obraz, ja po prostu umieścić przykładowy adres URL („http://www.example.com/images/btn_html.png”) należy użyć ważnej jednego aby zobaczyć przycisk wtyczki.

Aby ustawić tę wtyczkę w pasku CKEditor, należy skonfigurować go w pliku config.js, na przykład:

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'] 
    ]; 
}; 

wiem, że to działa, więc jeśli masz jakieś problemy proszę mi powiedzieć.

Answer 3

dla mnie to pomogło w użyciu:

config.extraPlugins = 'htmlSource'; 

moje poprzednie odpowiedzi zostały usunięte z przyczyny hiper-higienicznych; chociaż ja chociaż to mogłoby pomóc każdemu ..

Answer 4

Dla CKEditor 4.1.1, kombinacja powyższych dwóch odpowiedzi pracowała dla mnie, chociaż musiałem zrobić jakieś drobne poprawki. Część, która mówi "--- Uruchom tutaj wtyczkę ---" Udało mi się skopiować tak jak jest. Dla opcji konfiguracyjnych, musiałem użyć

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

zamiast

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

Wreszcie, to wszystko było zrobione w trybie inline z prostym montażu waniliowym, czyli nie trzeba pobierać żadnych dodatkowych wtyczek aby to działało.

Answer 5

Przyszli googlersi, dla CKEditor v4.2 teraz istnieje wtyczka do przeglądania kodu źródłowego w trybie edycji bezpośredniej.

http://ckeditor.com/addon/sourcedialog

Answer 6

Używam plugin Julio w wersji 4, a potrzebne do wykonania regulacji, aby uniknąć tego JS błąd:

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

zamieniłem ten wiersz:

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

z tym:

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

Zgaduję, że rozwiązanie Julio wymaga jQuery, a moim podejściem jest podejście CKEditor (lub przynajmniej bliższe temu!).