勉強したことのメモ

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

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

      2022/06/06

チェックボックスの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で処理は正常に実 ...

javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法

reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたもの ...

JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...