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 - 内嵌编辑 - 自定义样式组合

回答

相关问题