勉強したことのメモ

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

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

   

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み込み時は「display:none」で非表示にしており、ボタンを押すとページはリロードせずにNicEditを表示するという仕様。尚且つNicEditに対して「width:100%」を割り当てていた。このような状況でボタンを押すと表示はされても横幅がブラウザ幅100%にならなかった。以下に対応方法をメモ。

 

サンプル

未対応版

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

対応版

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

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NicEdit</title>
<style>
textarea{
width: 100%;
height: 200px;
}
</style>
</head>
<body>

    <div id="hide" style="display: none;">
        <textarea name="nicedit" id="nicedit"></textarea>
    </div>

    <a href="javascript:void(0);" id="show">NicEdit表示</a>

    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="./nicEdit_ja/nicEdit.js"></script>
    <script type="text/javascript">
    bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
    $(function(){
        $('#show').click(function(){
            $('#hide').show();
            $(this).hide();

            $('.nicEdit-panelContain').parent().width('100%');
            $('.nicEdit-panelContain').parent().next().width('100%');
            $('.nicEdit-main').css({width:'100%', padding:"0", minHeight:"200px"});
        });
    });
    </script>
</body>
</html>

29~31行目が対応策となる。31行目のminHeightの値は適宜変更する。

 

参考サイト

https://stackoverflow.com/questions/11704769/nicedit-in-hidden-div-is-resized-small

 - jQuery, JavaScript

  関連記事

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

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

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

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

クロスドメインな状況でiframeがIEのみ挙動がおかしくなる場合

iframeで別のドメインのサイトを表示させた場合に、firefoxやchrom ...