ダッチオーブンの底

好奇心旺盛でいろんなことにチャレンジするが、ことごとく失敗ばかりする文系未経験プログラマーが体験して、皆さんの役に立ちそうな情報を発信していくブログです。

【JS】ckeditorでリアルタイムで文字数カウントしたい時、【プラグインなし】

仕事の都合でプラグインなしで、ckeditorの文字数を入力してる最中に今何文字打ってるか出してほしいと
いう依頼があり、戸惑うことがあったのでメモ書き

ckeidtorのレファレンスにあった「instanceReady」というイベントを使う。
これはckeditorのインスタンスを作り終えた後に動いてくれるもの

CKEDITOR.instances.ckeditor.on("instanceReady", function(){
	        var ck = CKEDITOR.instances.ckeditor;
	        ck.document.on("keyup",function(){
	            
  var words = CKEDITOR.instances.ckeditor.getData();//ckeditorの中の文字列をとってきてくれる
		  var trim = words.replace(/<("[^"]*"|'[^']*'|[^'">])*>|&nbsp;|\r|\n|\r\n|\t|\v|\f| |<br \/>/g, '').trim().length//ここで空白文字など、カウントしたくないものをとる
	            console.log(trim.length)
	        })
	    });

こんな感じで、イベントの中に入れたものをインスタンスを作り終えた後に実行してくれる。

これで文字数がとれる。


また、[setData]などを使ってjsから中身をいじる場合は。

			    CKEDITOR.instances.ckeditor.on("dataReady", function (evt) {
			        var ck = CKEDITOR.instances.ckeditor;
			        ck.document.on("keyup", function () {
			            
     var words =CKEDITOR.instances.ckeditor.getData();
			            var trim = words.replace(/<("[^"]*"|'[^']*'|[^'">])*>|&nbsp;|\r|\n|\r\n|\t|\v|\f| |<br \/>/g, '').trim().length//ここで空白文字など、カウントしたくないものをとる
	            		    console.log(trim.length)
			            });
			    })

とイベントを[dataReady]に変える