LoginSignup
0
0

More than 1 year has passed since last update.

CKEditor エラー「Uncaught TypeError: Cannot read property 'unselectable' of null」の解消

Last updated at Posted at 2021-06-30

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"を指定すると最後に読み込まれるそうです!上記のやり方よりも簡単ですね・・・

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0