CKEditor 4 - 行内编辑 - 自定义样式下拉框

3
我正在运行多个 CKE 实例,在其内联编辑模式下,以便最终用户编辑内容块,就像这些内容块在最终的 HTML 渲染中一样。因此,编辑的所有内容都继承自我的编辑页面的全局 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
                    },
                });

            }
        }
    } );

});
1个回答

1

谢谢,这绝对是正确的方法。我无法让stylesheetparser工作(即使在我的样式中使用tag.class形式),它掩盖了这种方法可以有效地替换全局CSS中自动生成的样式的事实。我从您提供的链接中实现了基本示例,发现它非常有用。 - n4tionale
@n4tionale 我很高兴它对你有帮助 :) - GibboK

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接