勉強したことのメモ

webプログラマが勉強したことのメモ。

CKEditor(WYSIWYGエディタ)の設置方法と日本語化

   

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんまり見た目が好きじゃなかった。設置が楽で見た目も今風っぽいのが何か無いか探したところCKEditorが良かった。以下に設置方法と日本語化のメモ。

 

公式サイト

バージョン4

https://ckeditor.com/docs/ckeditor4/latest/

バージョン5

https://ckeditor.com/docs/ckeditor5/latest/

 

サンプル

バージョン4

https://taitan916.info/sample/CKEditor/

バージョン5

https://taitan916.info/sample/CKEditor/index2.php

 

ソースコード(バージョン4)

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
</head>
<body>

    <?php if( $_POST ){ ?>
        <div>送信結果:</div>
        <pre><?php var_dump($_POST['editor']);?></pre>
    <?php } ?>

    <form action="./" method="post">
        <textarea name="editor" class="ckeditor"></textarea><br>
        <input type="submit" value="送信">
    </form>

    <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
    <script>
    CKEDITOR.replace('editor');
    </script>
</body>
</html>

バージョン4は特に設定しなくても日本語化されていた。

 

ソースコード(バージョン5)

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
<style>
.ck-editor__editable_inline {
    min-height: 200px;
}
</style>

</head>
<body>

    <?php if( $_POST ){ ?>
        <div>送信結果:</div>
        <pre><?php var_dump($_POST['editor']);?></pre>
    <?php } ?>

    <form action="./index2.php" method="post">
        <textarea name="editor" id="editor"></textarea><br>
        <input type="submit" value="送信">
    </form>

    <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script>
    <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script>

    <script>
    ClassicEditor.create( document.querySelector( '#editor' ), {
        language: 'ja'
    }).then( editor => {
        console.log( editor );
    }).catch( error => {
        console.error( error );
    });
    </script>
</body>
</html>

バージョン5は「<script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script>」を呼び出すのと、「language: 'ja'」で言語指定が必要。

 

所感

どちらのバージョンもCDNで使えて便利。バージョン5の方が見た目は良さげ。今後WYSIWYGエディタを導入する際は選択肢の一つとして覚えておく。

 - JavaScript

  関連記事

Chart.jsでグラフの描写

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法

管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したA ...

prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

javascriptでのについて

javascriptを書く際に、 <script> <!-- ...

JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...