CKEditorを使って入力フォームをWYSIWYG化する

WordpressMovable Typeのようなブログの入力フォームには、

書式を使って見た目を自由に整形するWYSIWYGという機能が備わっている。

 f:id:Kow:20181106173336j:plain

この機能は、実はブログでなくても簡単に使うことができる。



 

<form action="" method="post">
    <textarea name="test" id="editor"></textarea>
    <input type="submit" value="Submit" />
</form>

こんな風な入力フォームがあったとすれば、

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
<script>
// エディタへの設定を適用する
CKEDITOR.replace('editor', {
    uiColor: '#EEEEEE',
    height: 400,
});
</script>

こうやってCDNからCKEditorのライブラリを読み込むだけで、上のようなスタイルになる。あとは、フォームなのでタグでスタイルが付いた状態の文章をサーバサイドに送られることも確認できる。

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>

<?php
if(isset($_POST["test"])){
    var_dump($_POST["test"]);
}
?>

<form action="" method="post">
    <textarea name="test" id="editor"></textarea>
    <input type="submit" value="Submit" />
</form>
	
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
<script>
// エディタへの設定を適用する
CKEDITOR.replace('editor', {
    uiColor: '#EEEEEE',
    height: 400,
});
</script>
</body>
</html>