勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

サイトにHTMLエディタ(WYSIWYG)を導入する方法

   2024/01/06  JavaScript

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうなのがあったのでメモ。

以下サンプルとかダウンロードとか。

 


 

■ダウンロード先(NicEdit 日本語版)
http://cmonos.jp/blog/2010010800/1.shtml

 


 

■ソース

<? print_r($_POST['hoge']); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style>
textarea{
width: 400px;
height: 200px;
}
</style>
<script type="text/javascript" src="./nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
</head>
<body>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<textarea name="hoge"></textarea>
<input type="submit" value="submit">
</form>

</body>
</html>

 


 

■サンプル
http://sample.taitan916.info/nicedit/index.php

 


 

■その他
デフォでテキストエリアに対してウィジウィグ化してくれるみたいなので非常に便利。

 - JavaScript

  関連記事

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...

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

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...

CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法

ラジオボタンを選択することでCKEditor5(ウィジウィグエディタ)とテキスト ...