Every Qiita #1
のんびり独学初学者の毎日投稿チャレンジ 1日目
今回は・・・
自作コミュニティアプリ開発でリッチテキストエディタを実装した時の備忘録です。
Uncaught TypeError: Cannot read property 'unselectable' of null
<form action="{{ route('question.store') }}" method="post" accept-charset="utf-8">
@csrf
<textarea id="editor" name="ckeditor"></textarea>
<input class="btn btn-primary" type="submit" name="question_submit" value="質問確認画面へ">
</form>
<script>
CKEDITOR.replace("editor", {
uiColor: "#EEEEEE",
width:700,
height:600,
});
</script>
上記コードだとscriptタグないが先に読み込まれプロパティがないと言われている?
[解消方法]scriptタグの読み込みを遅らせてみる
<form action="{{ route('question.store') }}" method="post" accept-charset="utf-8">
@csrf
<textarea id="editor" name="ckeditor"></textarea>
<input class="btn btn-primary" type="submit" name="question_submit" value="質問確認画面へ">
</form>
<!-- scriptがページを読み込む前に発動するため、一定時間を置いて起動させる -->
<script>
setTimeout(function(){
CKEDITOR.replace("editor", {
uiColor: "#EEEEEE",
width:700,
height:600,
});
},100);
</script>
とりあえずエラーは解消できたとさ〜
追記2021/7/3
scriptタグにtype="module"を指定すると最後に読み込まれるそうです!上記のやり方よりも簡単ですね・・・