CKEditor 4 - 內嵌編輯 - 自定義樣式組合

我正在運行CKE的多個實例，以其內聯編輯模式，讓最終用戶編輯內容塊，就像在最終的html呈現中看起來一樣。CKEditor 4 - 內嵌編輯 - 自定義樣式組合

因此編輯的所有東西都從我編輯頁面的全局CSS繼承。而且太棒了。

現在我想要顯示的樣式組合，不是所有的運行樣式，但只有一部分（顏色類和這樣的基本東西）。

我該如何做到這一點？

即保持適用於所有現有的CSS無論是編輯，只提供一些他們在組合

感謝任何幫助或起點......

找到解決方案後：通過AJAX和其他調整與多個在線編輯，自定義樣式，一個完全工作的代碼示例自動保存，如果它可以幫助

CKEDITOR.disableAutoInline = true; 
CKEDITOR.stylesSet.add('my_styles', [ 
    // Block-level styles 
    { name: 'Blue Title', element: 'h2', attributes: { 'class': 'bleu' } }, 
    { name: 'Red Title' , element: 'h3', attributes: { 'class': 'rouge' } }, 

    // Inline styles 
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } }, 
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } } 
]); 

    $("div[contenteditable='true']").each(function(index) { 

    var content_id = $(this).attr('id'); 

    var ligneidx = $(this).attr('ligneidx'); 
    var blocidx = $(this).attr('blocidx'); 


CKEDITOR.inline(content_id, { 


     stylesSet : 'my_styles', 
     toolbarGroups : [ 
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, 
    { name: 'forms', groups: [ 'forms' ] }, 
    '/', 
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, 
    { name: 'links', groups: [ 'links' ] }, 
    { name: 'insert', groups: [ 'insert' ] }, 
    '/', 
    { name: 'styles', groups: [ 'styles' ] }, 
    { name: 'colors', groups: [ 'colors' ] }, 
    { name: 'tools', groups: [ 'tools' ] }, 
    { name: 'others', groups: [ 'others' ] }, 
    { name: 'about', groups: [ 'about' ] } 
], 



// Remove some buttons provided by the standard plugins, which are 
// not needed in the Standard(s) toolbar. 
removeButtons : 'Form,Checkbox,Radio,TextField,Textarea,Select,Button,HiddenField,ImageButton,Replace,Find,SelectAll,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Language,BidiRtl,BidiLtr,Flash,Smiley,PageBreak,Iframe,Font,FontSize,About,NumberedList,Blockquote,CreateDiv,Underline,Subscript,Superscript,Page2images, Newpage,Templates,Strike,Indent,Outdent', 
//removePlugins: 'page2images,VideoDetector', 

format_tags : 'p;h1;h3', 

// Simplify the dialog windows. 
removeDialogTabs : 'image:advanced;link:advanced', 
extraPlugins : 'sourcedialog', 
colorButton_enableMore : false, 
colorButton_colors : '00819c,e32434,e9632d,9c1f4d,795127,ececf0,ececec,fafafa,dddddd,939393,25242c,fff,000', 
filebrowserBrowseUrl : '/modele/classes/filemanager/dialog.php?type=2&editor=ckeditor&lang=fr_FR&fldr=', 
filebrowserUploadUrl : '/modele/classes/filemanager/dialog.php?type=2&editor=ckeditor&lang=fr_FR&fldr=', 
filebrowserImageBrowseUrl : '/modele/classes/filemanager/dialog.php?type=1&editor=ckeditor&lang=fr_FR&fldr=', 


uiColor : "#a7f0ff", 
defaultLanguage : 'fr', 




     on: { 
      blur: function(event) { 
       var data = event.editor.getData(); 

       var request = jQuery.ajax({ 
        url: "/modele/admin/ajaxupdate_bloc.php", 
        type: "POST", 
        data: { 
         content : data, 

         ligneidx : ligneidx, 
         blocidx : blocidx 
        }, 
       }); 

      } 
     } 
    }); 

});

來源

2015-10-15 n4tionale

試圖通過自己的風格DEFI nitions到CKEDITOR這樣

CKEDITOR.stylesSet.add()

更多的信息和例子在這裏： http://docs.ckeditor.com/#!/guide/dev_howtos_styles

還有一個樣式表解析器插件可以使用，信息在這裏： http://ckeditor.com/addon/stylesheetparser

來源

2015-10-15 10:05:28 GibboK

謝謝你，這是肯定的要走的路。我無法使stylesheetparser工作（儘管tag.class表單在我的樣式中仍然不能使用），並且它掩蓋了這個方法可以從全局CSS有效替換自動生成樣式的事實。我發現它通過你的鏈接實現了基本的例子。 – n4tionale

@ n4tionale我很高興它幫助你:) – GibboK

CKEditor 4 - 內嵌編輯 - 自定義樣式組合

回答

相關問題