Как остановить присутствие кнопки «Изображение» на панели инструментов, чтобы CKeditor неправильно считывал свойства изображения? - PullRequest
0 голосов
/ 20 декабря 2018

Я внедряю 2 версии CKeditor в проект для работы.Одним из них является полная версия редактора (все панели инструментов, все возможности редактирования доступны для пользователя).Другая версия доступна только для чтения (доступно только несколько кнопок, редактирование запрещено).Эта вторая версия предназначена только для отображения содержимого, созданного в первой версии.

Содержимое, созданное в первой версии, сохраняется в формате xml и затем читается любой из версий CKeditor (редактор или только для чтения).Нет никакой разницы в их конфигурации, за исключением доступных панелей инструментов, внешних плагинов для свойства «только для чтения» (которые я пытался удалить, но они не влияют на проблему) и класса body (в версии редактора, которую я использую)-editor 'и в версии только для чтения я использую' document-editor '. Позвольте мне указать, что' extraAllowedContent 'абсолютно одинаково для обеих версий CKeditor.

После того, как я вставил изображение и применил вращениек нему (в версии редактора), а затем приступить к открытию сгенерированного файла, если я открою его в реализации «только для чтения», все выглядит так, как должно. Все атрибуты считываются, как настроено. Все, как и ожидалось. Проблема возникаеткогда я пытаюсь открыть сгенерированный файл в «редакторе» версии. В этом случае изображениепоявляется без поворота.

Это реализация «только для чтения»:

    CKEDITOR.replace( 'content', {
                                bodyClass : 'document-editor',
                                readOnly : true,
                                customConfig : '',
                                extraPlugins: '',
                                extraAllowedContent: 'caption;table[*]{*}(*);thead[*]{*}(*);tbody[*]{*}(*);th[*]{*}(*);tr[*]{*}(*);td[*]{*}(*);img[!src,width,height,text-align]{transform,margin*,border*}(*);p{transform,margin*};ul(*);ol(*);li(*);div(!leaders);span(!leaders);span{!font-variant};b;i;u;em;s;sub;sup',
                                plugins : 'a11yhelp,about,basicstyles,border,button,clipboard,colordialog,computedstyles,contextmenu,dialog,dialogui,elementspath,enterkey,entities,fakeobjects,filebrowser,filetools,find,floatingspace,floatpanel,FMathEditor,format,formatmarks,htmlwriter,image,image2,imagepaste,imageresize,indent,indentlist,lineutils,list,listblock,magicline,maximize,menu,menubutton,nbsp,notification,notificationaggregator,pagebreak,panel,pastefromword,pastetext,popup,removeformat,resize,richcombo,sedrissuers,sedrlist,sedrstylescombo,selectall,showborders,specialchar,tab,table,tabletools,tabletoolstoolbar,tableresize,tableselection,texttransform,toolbar,undo,uploadimage,uploadwidget,widget,widgetselection,wordcount,wsc,wysiwygarea',

                                toolbar : [
                                    { name: 'clipboard', items: ['Copy'] },
                                    { name: 'editing', items: ['Find'] },
                                    { name: 'tools', items: ['Maximize'] },
                                    { name: 'about', items: ['About'] },
                                    ],
                                removeDialogTabs : 'image:advanced;link:advanced',
                                uploadUrl : 'Upload',
                                imageUploadUrl : 'Upload',
                                filebrowserImageUploadUrl : 'Upload',
                                language : 'pt',
                                removeButtons : 'Anchor,Format',
                                height : '536px',
                                format_tags: 'p;h1;h2;h3;pre',
                                wordcount : {
                                    showParagraphs: true,
                                    showWordCount: true,
                                    showCharCount: true,
                                    countSpacesAsChars: true,
                                    countHTML: true
                                },
                            });

И это версия «редактора»:

    CKEDITOR.replace( 'content', {
            bodyClass : 'article-editor',
            customConfig : '',
               extraPlugins: 'onchange,flip',
            extraAllowedContent : 'caption;table[*]{*}(*);thead[*]{*}(*);tbody[*]{*}(*);th[*]{*}(*);tr[*]{*}(*);td[*]{*}(*);img[!src,width,height,text-align]{transform,margin*,border*}(*);p{transform,margin*};ul(*);ol(*);li(*);div(!leaders);span(!leaders);span{!font-variant};b;i;u;em;s;sub;sup',
            plugins : 'a11yhelp,about,basicstyles,border,button,clipboard,colordialog,computedstyles,contextmenu,dialog,dialogui,elementspath,enterkey,entities,fakeobjects,filebrowser,filetools,find,floatingspace,floatpanel,FMathEditor,format,formatmarks,htmlwriter,image,image2,imagepaste,imageresize,indent,indentlist,lineutils,list,listblock,magicline,maximize,menu,menubutton,nbsp,notification,notificationaggregator,pagebreak,panel,pastefromword,pastetext,popup,removeformat,resize,richcombo,sedrissuers,sedrlist,sedrstylescombo,selectall,showborders,specialchar,tab,table,tabletools,tabletoolstoolbar,tableresize,tableselection,texttransform,toolbar,undo,uploadimage,uploadwidget,widget,widgetselection,wordcount,wsc,wysiwygarea',
            toolbar : [
                { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                { name: 'editing', items: ['SelectAll', 'displayformatmarks', 'Find', 'Replace', '-', 'TransformTextToUppercase', 'TransformTextToLowercase', 'TransformTextCapitalize', 'TransformTextSwitcher', '-','flip'] }
                { name: 'insert', items: ['sedrissuers', 'Image', 'SpecialChar', 'PageBreak', 'FMathEditor'] },  //The 'Image' button seems to break the image rotation
                { name: 'tools', items: ['Maximize'] },
                '/',
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Superscript', 'Subscript', '-', 'RemoveFormat'] },
                { name: 'paragraph', items: ['sedr-list1', 'sedr-list2', 'sedr-unordered', '-', 'sedr-outdent', 'sedr-indent', '-', 'Blockquote'] },
                { name: 'styles', items: ['Styles', 'Format'] },
                { name: 'about', items: ['About'] },
                '/',
                {
                    name: 'tables', items: ['tableinsert', 'tabledelete', 'tableproperties', '-',
                        'tablerowinsertbefore', 'tablecolumninsertafter', 'tablerowdelete', '-',
                        'tablecolumninsertbefore', 'tablecolumninsertafter', 'tablecolumndelete', '-',
                        'tablecellinsertbefore', 'tablecellinsertbefore', 'tablecelldelete', 'tablecellproperties', '-',
                        'tablecellsmerge', 'tablecellmergeright', 'tablecellmergedown', 'tablecellsplithorizontal', 'tablecellsplitvertical', 'Border', 'tableleadingdots']
                }
            ],
            format_tags : 'p;h1;h2;h3;pre',
            removeDialogTabs : 'image:advanced;link:advanced',
            uploadUrl : 'Upload',
            imageUploadUrl : 'Upload',
            filebrowserImageUploadUrl : 'Upload',
            language : 'pt',
            removeButtons : 'Anchor,Format',
            height : '536px',
            wordcount : {
                showParagraphs: true,
                showWordCount: true,
                showCharCount: true,
                countSpacesAsChars: true,
                countHTML: true
            },
        });

Частькода, который сохраняется в файле XML и читается любой из версий:

    <p style="text-align:center; margin-top:150px; margin-bottom:150px; transform:rotate(40deg)"><img alt="" height="378" sedralign="center" sedrheight="378" sedrrotation="40" sedrwidth="604" src="Download/5f0d4c65-418c-4b96-9ea5-5a7ca15d0661.jpg?id=120007114" width="604" /></p>

Когда я открываю файл XML в реализации только для чтения CKeditor, это то, что я получаю (которыйэто то, что я хочу): https://imgur.com/m1HBtST

Когда я открываю тот же файл в реализации редактора, это то, что я получаю: https://imgur.com/lOeRZMz

И после большого количества проби ошибка, я обнаружил, что если я удаляю кнопку «Изображение» с панели инструментов в версии редактора следующим образом:

    { name: 'insert', items: ['sedrissuers'," + /* 'Image', */ "'SpecialChar', 'PageBreak', 'FMathEditor'] },\

Я получаю следующее: https://imgur.com/Ys4TdO2

Iмне трудно понять, почему кнопка может нарушить форматирование CKEditor для меня ... Кто-нибудь может помочь?

...