勉強したことのメモ

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

  関連記事

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

javascriptでスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...

日本地図のクリッカブルマップをjQueryで実装する方法(japan-map)

JavaScriptもしくはjQueryで日本地図を表示し、都道府県や八地方区分 ...

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

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

javascriptでランダム英数字

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

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

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

jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...