勉強したことのメモ

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

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

   

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とtextareaを切り替えたかった。また、WordPressのエディタのようにページ遷移無しで切り替えたい。以下に対応方法をメモ。

 

サンプル

https://taitan916.info/sample/NicEdit/change.php

 

ソースコード

$(function(){
    var wysiwyg;
    $('#wysiwyg-change').on('change', function(){
        if( $(this).prop('checked') == true ){
            wysiwyg_body = new nicEditor({fullPanel : true}).panelInstance('wysiwyg');
        }else{
            wysiwyg_body.removeInstance('wysiwyg');
        }
    });
});

 

 

所感

実運用時はWYSIWYGをONにした際Cookieにデータを保存し、次回ページ読み込み時にCookieをチェックしデータがある場合は最初からWYSIWYGを起動する、という形がよさそう。

 

参考サイト

http://nusoft.jp/common/nicEdit_ja/demos/demo03.html

 - jQuery, JavaScript

  関連記事

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

IE11でフォーム送信時に二重登録される

Internet Explorer11でform送信時にデータが二重登録されると ...

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

javascriptの文末

下記みたいなコードがあって、文末に「;」が 無いのになんで動くのこれ? となった ...

jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...

jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

javascript:void(0)について

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