• トップ
  • 当サイトについて
  • K
  • プライバシーポリシー
  •      CKEditor4 > インストール&セットアップ方法

    CKEditor4のインストール

    Tag: JavaScript CKEditor CKEditor4 WYSIWYGエディタ ビジュアルエディタ 編集 エディター ツール インストール セットアップ 方法 使い方 導入方法

    1. ダウンロード(省略可)

    ダウンロードしなくてもCKEditor CDNが使えるので省略は可能です。

    2. セットアップ

    ダウンロードを省略した場合は「インストール(CDN)」を参照し、ダウンロードした場合は「インストール」を参照してください。

    CDNでのセットアップ例:http://pkom-files.22web.org/test/CKEditor/index.html

    インストール

    ダウンロードしたファイルを解凍し、サーバー上に転送してください。
    htmlファイルを作成し、以下のコードを貼り付けてください。

    すべて開くすべて閉じる
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CKEditor</title>
            <script src="./ckeditor/ckeditor.js"></script>
        </head>
        <body>
            <textarea name="textarea1"></textarea>
            <script>
                CKEDITOR.replace( 'textarea1' );
            </script>
        </body>
    </html>

    インストール(CDN)

    htmlファイルを作成し、以下のコードを貼り付けてください。

    すべて開くすべて閉じる
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CKEditor</title>
            <script src="https://cdn.ckeditor.com/4.15.0/full/ckeditor.js"></script>
        </head>
        <body>
            <textarea name="textarea1"></textarea>
            <script>
                CKEDITOR.replace( 'textarea1' );
            </script>
        </body>
    </html>
    <script src="https://cdn.ckeditor.com/''(バージョン)''/''(種類)''/ckeditor.js"></script>

    種類は「basic」,「standard 」,「full」があります。
    こちらで生成できます。

    3. セットアップ

    セットアップ(config.js)

    すべて開くすべて閉じる
      1
      2
      3
      4
    
    -
    |
    |
    !
    
    CKEDITOR.editorConfig = function( config ) {
        config.language = 'ja';
        config.uiColor = '#EEEEEE';
    };

    「language: 'ja'」で場所に限らず、日本語に設定しています。
    「uiColor: '#EEEEEE'」で色が変更できます。
    uiColorなどのこれらの設定は特に使うことはないと思いますが、確認のため使ってみてください。

    セットアップ(CDN)

    すべて開くすべて閉じる
      1
      2
      3
      4
      5
      6
    
     
     
     
     
     
     
    
    <script>
        CKEDITOR.replace( 'textarea1', {
            language: 'ja',
            uiColor: '#EEEEEE'
        });
    </script>

    「language: 'ja'」で場所に限らず、日本語に設定しています。
    「uiColor: '#EEEEEE'」で色が変更できます。
    uiColorなどのこれらの設定は特に使うことはないと思いますが、確認のため使ってみてください。
    今回はreplaceを使っていますが、CDNでも設定ファイルをつくることもできます。

    すべて開くすべて閉じる
      1
      2
      3
    
    -
    |
    !
    
    #CKEDITOR.replace( 'textarea1', {
        customConfig: '/ckeditor/config.js'
    });

    「customConfig: '/ckeditor/config.js'」では「(ルート)/ckeditor/config.js」を指定しています。
    動作しない場合は絶対パス(URL)を貼り付けてください。

    セットアップが完了したらこんな感じになるはずです。

    ckeditor1.png

    参考にしたサイト


    (Cached Page)

    上位カテゴリー

    [もっと見る]

    更新したページ(15)

    2021-11-30 2021-11-16 2021-11-13 2021-11-12 2021-10-05 2021-09-28 2021-09-21 2021-07-08 2021-07-07

    [もっと見る]

    人気なページ(15)

    [もっと見る]

    今日アクセスされたページ(15)

    [もっと見る]



    添付ファイル: fileckeditor1.png 100件 [詳細] fileckeditor_download_site.png 105件 [詳細]