GrapesJSエディターに統合されたインラインCKeditor

Aug 20 2020

GrapesJSが実装されているエディターアプリケーションで作業しています。そのエディターと機能は正常に機能しています。インラインCKeditorをGrapesJSエディターに統合しましたが、問題はほとんどありません。

  1. 複数のインライン編集オプションが表示されています
  2. エディターオプションが正しく配置されていない場合があります
  3. 主な問題:インラインオプションが表示されていますが、選択したテキストに反映されていません。つまり、これらのインラインオプションをクリックしてエディターのコンテンツをフォーマットできますが、エディターには反映されません。

ここで私は書かれたいくつかのコードを共有しています:

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: 1,
    height: '100%',
    storageManager: { type: 0 },
    plugins: ['gjs-plugin-ckeditor']
});

editor.setCustomRte({
    enable: function(el, rte) {
        // If already exists just focus
        if (rte) {
            this.focus(el, rte); // implemented later
            return rte;
        }
    
        // CKEditor initialization
        rte = CKEDITOR.inline(el, {
            // Your configurations...
            toolbar: [
                { name: 'styles', items: ['Font', 'FontSize' ] },
                ['Bold', 'Italic', 'Underline', 'Strike'],
                {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
                {name: 'links', items: ['Link', 'Unlink']},
                {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
            ],
            uiColor: '#9AB8F3', // Inline editor color
            startupFocus: true,
            extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
            allowedContent: true, // Disable auto-formatting, class removing, etc.
            enterMode: CKEDITOR.ENTER_BR,
            // extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
            
            // sharedSpaces: {
            //  top: editor.RichTextEditor.getToolbarEl(),
            // }
        });
    
        this.focus(el, rte); // implemented later
        return rte;
    },
    focus(el, rte) {
        // Do nothing if already focused
        if (rte && rte.focusManager.hasFocus) {
            return;
        }
        el.contentEditable = true;
        rte && rte.focus();
    },
    disable(el, rte) {
        el.contentEditable = false;
        if (rte && rte.focusManager)
            rte.focusManager.blur(true);
    }
});

これがJSFiddleで、動作とコードを確認できます。

バージョン:

グレープジス-0.16.18

ckeditor-標準-4.14.1

期待される動作は何ですか?

インラインCKeditorオプションからインラインフォーマットオプションを適用する際、選択したテキストに反映する必要があります。

バグの詳細を説明してください:

インライン編集の目的で、CKeditorをgrapesJSエディターに統合しました。現在、テキストを選択してフォーマットすると、インラインCKeditorオプションが、黒いツールバーに別のいくつかのオプションとともに表示されます。私はそれについて混乱しています。そして主な問題は、インラインフォーマットオプションのいずれかを使用しても、選択したテキストにフォーマットが反映されないことです。テキストの書式設定、リスト、画像のアップロード、リンクなど、CKeditorのインラインオプションからは何もできません。

現在の動作は何ですか?

主な問題は、インラインオプションのいずれかを使用しても、選択したテキストに書式が反映されないことです。テキストの書式設定、リスト、画像のアップロード、リンクなど、CKeditorのインラインオプションからは何もできません。

回答

4 Sinto Sep 02 2020 at 13:42

ご覧のとおり、SOからの応答はありません。この問題はGithubでも報告しており、同様の問題の回答を確認しています。数日後、私は応答を受け取りました、そしてそれは私にとってうまくいきました。ですから、その回答を皆さんと共有したいと思います。これは、私のような他の誰かに役立つかもしれません。

私の最初の問題:複数のインライン編集オプションが表示されています

プラグインGrapesJS CKEditorバージョンはまだ呼び出し、カスタムRTEとしてCKEditorバージョンを登録しeditor.setCustomRte、実際にそれを2回設定されています。

editor.setCustomRteブロックを取り外しましたが、正常に機能しました。CKEditorオプションを提供する場合は、ここにpluginsOpts示すレベルで実行する必要があります。

これが私の2番目の問題です:時々エディターオプションが適切に配置されていません

これは、editor.setCustomRteブロックを削除した後にも修正されました。

そして、統合中に直面した最後の主な問題:選択したテキストにインラインフォーマットが反映されない

GrapesJS CKEditorバージョンのプラグインに依存している標準のすべてのCKEditorバージョン、使用していない標準のCKEditorバージョンを。使用するhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js 修正されます。

これは、GrapesJSとのインラインCKEditor統合のために参照できる実用的なフィドルです。

追記editor.setCustomRteブロックを削除した後、別の問題に直面しました-これは私の最初の問題の修正でした。次のようになります。

ckeditor.js:270 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "sharedspace" was not found at "https://cdn.ckeditor.com/4.14.1/standard/plugins/sharedspace/plugin.js?t=K5H9".
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:270)
    at e (ckeditor.js:265)
    at Array.x (ckeditor.js:265)
    at w (ckeditor.js:265)
    at HTMLScriptElement.CKEDITOR.env.ie.e.$.onerror (ckeditor.js:266)

同様のエラーに直面している場合は、使用しているCKEditorのタイプ/バージョンが原因であることに注意してください。私は標準のCKEditorバージョンを使用していましたが、それが問題でした。これをStandard-AllCKEditorバージョンに変更した後、問題は解決しました。

Grapedropは、アカウントを作成し、GrapesJSのほぼすべてのプロパティを確認できるサイトです。

CKEditorで使用される追加のプラグインリストは次のとおりです。

dialogui,dialog,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,
notification,button,toolbar,clipboard,panelbutton,panel,floatpanel,
colorbutton,colordialog,templates,menu,contextmenu,copyformatting,div,
resize,elementspath,enterkey,entities,exportpdf,popup,filetools,
filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,
forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,
indentblock,indentlist,smiley,justify,menubutton,language,link,list,
liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastetools,
pastefromgdocs,pastefromword,preview,print,removeformat,save,selectall,
showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,
tabletools,tableselection,undo,lineutils,widgetselection,widget,
notificationaggregator,uploadwidget,uploadimage,wsc

CKEditorインラインカスタムツールバーオプションを必要に応じて追加