CKEDITOR 4のサイトページへのリンクを追加する

こんにちは、％habrauser％！



多くの場合、さまざまなプロジェクトのミニCMSを作成する必要があります。 それは、人間の怠inessによってより正当化されます。 したがって、このようなプロジェクトでは、非常に便利なCKEDITORエディターを追加することがよくあります。 また、多くの場合、顧客はサイトの資料にリンクを追加するための便利な機能を作成するよう求められます。 ネットワークにはこのようなプロセスの多くの説明がありますが、ほとんどはバージョン<4向けに設計されています。最近、エディターでこの機能を実装する必要がありました。

親愛なる読者がこれを実装する方法に興味があるなら、catを歓迎します。

問題の声明

小さなサイズのCMSを作成する場合、多くの場合、サイトに資料を投稿するためのプログラマーやレイアウトデザイナーなしで実行できるツールを提供する必要があります。 一方では、単にエディターを挿入し、すべてが機能するようにアドレスバーからリンクをトリミングする方法を指示できます。 しかし、よくあることですが、パフォーマーはそれがどのように行われるかを変更したり忘れたりします。

そのため、セクション/ CMSマテリアルへのリンクを単純に追加する機能を追加します。

最後に何が欲しいですか？ マテリアルを選択して、それへのリンクを生成する簡単な方法が必要です。 これを行うには、ドロップダウンリストを使用します。

最初のステップ

既にCKEDITORからアーカイブをダウンロードし、プロジェクトフォルダーに解凍したと仮定します（便宜上、これはScriptsフォルダーであると仮定します）。 したがって、エディターはパス/ Scripts / ckeditorにあります

次は？

そして、私たちは...いや、スクリプトを編集しません。 これが次のステップです。 まず、資料のリストを作成するための基礎となるデータを作成する必要があります。

理論のビット

この問題を扱ったほとんどすべてのマニュアルでは、作成者が非表示の入力を作成し、データを「プッシュ」します。 しかし、これは無条件の方法ではありません。 データを配置するグローバル変数を宣言し、それに基づいてリストを初期化することができます。 これは記事のトピックとは何の関係もないため、このようなジャングルについては特に掘り下げません。したがって、他のマニュアルに示されているオプションについて簡単に説明します。

パラメーターとして渡されるリストの機能の1つは、JSONオブジェクトであり、ストリング配列の配列でなければならないことです。

したがって、最終的なオブジェクトは次のようになります。

[['','/index.html'],['','/images.html'],['','/about.html'].....]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのようなリストを作成する方法は開発者次第です。 制限はありません。

リストを配置するページにコンテナを追加するだけです。 次のような非表示の入力を作成しましょう。

  <input type="hidden" id="localPageList" value="[['','/index.html'],['','/images.html'],['','/about.html'].....]" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、作業用のデータを準備しました。

進む

次に、スクリプトについて説明します。 まず、リンク選択ダイアログを作成するスクリプトを開きます/Scripts/ckeditor/plugins/link/dialog/link.js

言葉を見つける

 id: "linkType", type: "select"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（スクリプトは縮小されているため、検索するのはあまり便利ではありません。利便性を高めるためにフォーマットしました）

次の行を追加します

 return { title: b.title, minWidth: 350, minHeight: 230, contents: [{ id: "info", label: b.info, title: b.info, elements: [{ id: "linkType", type: "select", label: b.type, "default": "localPage", items: [ [b.toUrl, "url"], [b.localPage, 'localPage'], [b.toAnchor, "anchor"], [b.toEmail, "email"]], onChange: function () { var a = this.getDialog(), b = ["urlOptions", "localPageOptions", "anchorOptions", "emailOptions"], c = this.getValue(), d = a.definition.getContents("upload"), d = d && d.hidden; if (c == "url") { n.config.linkShowTargetTab && a.showPage("target"); d || a.showPage("upload") } else { a.hidePage("target"); d || a.hidePage("upload") } for (d = 0; d < b.length; d++) { var e = a.getContentElement("info", b[d]); if (e) { e = e.getElement().getParent().getParent(); b[d] == c + "Options" ? e.show() : e.hide() } } a.layout() }, setup: function (a) { a.type && this.setValue(a.type) }, commit: function (a) { a.type = this.getValue() } }, //   { type: 'vbox', id: 'localPageOptions', children: [ { type: 'select', label: ' ', id: 'localPage', // " ".     title: '  ,    ', items: eval(document.getElementById("localPageList").value), //   input' localPageList setup: function (data) { if (data.localPage) this.setValue(data.localPage); }, commit: function (data) { if (!data.localPage) data.localPage = {}; data.localPage = this.getValue(); } }] }, //#  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここですべてが明確になることを願っています



この段階で、ダイアログで使用される新しいタイプのリンクを記述し、入力からのデータで初期化しました。

ただし、ここでエディターを起動してリンクのリストを表示すると、作成したアイテムは表示されません。

ダイアログで新しいタイプのリンクを開きます

作成されたリンクタイプをダイアログに表示するには、初期化リストに追加する必要があります。

次のコード行を探しています。

 b = ["urlOptions", "anchorOptions", "emailOptions"]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

文字列「localPageOptions」を追加して、次のようにします。

 b = ["urlOptions", "localPageOptions", "anchorOptions", "emailOptions"]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エディタを起動してリンクダイアログを開くと、「未定義」の項目が表示されます。

「これは残念です！」 私はこれを最初に見たときに思った

しかし、コードを少し掘り下げてみると、ダイアログがローカライズファイルでタイプの名前を見つけようとしていることに気付きました。 そして、何も見つけることなく、名前を格納する変数に未定義を単に割り当てます。 この問題を解決するには、1行のコードをファイルに追加します（複数のローカライズを使用する場合）。

ローカライズを編集

ファイル/Scripts/ckeditor/lang/ru.js（英語のローカライズ版はen.js）を開きます。

単語で検索します。

 "title": "" //   "title": "Link" //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、コンマを介して行を追加します。

 "localPage": " " //   "localPage": "Local page" //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

localPageはリンクタイプの名前で、idパラメーターとして指定されます

結論の代わりに

一見些細なことではありませんでしたが、この作業には1.5〜2時間かかりました。 ネットワーク上で見つけたすべてのマニュアルは、CKEDITORバージョン2および3向けに書かれています。4番目のバージョンでは、多くの変更が加えられ、新しいAPIに適合させるためにコードを調べる必要がありました。 このような経験は役に立ちますが、すべてを迅速に行うことが非常に必要な場合があります。

したがって、私の投稿が誰かに役立つことを願っています。