CKEditor5でAPIを使いたい

CKEditor5というリッチテキストエディタの使い方についてです。

これを使って、記事の投稿Webアプリを作ろうと考えています。そのために基本的なAPIをいじって練習しているのですが、
初手でつまずいてしまいました。
サンプルコードに、setData()関数を使っただけなのですが、なぜか関数じゃないよと怒られてしまいます。

html
1<html lang="en">
2<head>
3    <meta charset="utf-8">
4    <title>CKEditor 5 – Classic editor</title>
5    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
6</head>
7<body>
8    <h1>Classic editor</h1>
9    <textarea name="content" id="editor">
10        &lt;p&gt;This is some sample content.&lt;/p&gt;
11    </textarea>
12
13    <script>
14        ClassicEditor
15    .create( document.querySelector( '#editor' ) )
16    .then( editor => {
17        console.log( editor );
18    } )
19    .catch( error => {
20        console.error( error );
21    } );
22    editor.setData( '<p>Some text.</p>' );
23
24
25    </script>
26</body>
27</html>

エラーメッセージ

Uncaught TypeError: editor.setData is not a function

at index4.html:22

もとは、QuickStartのデモコードに、BasicAPIの、setData()関数のサンプルコードを1行追加しただけです。

どこが間違っているのか、教えていただけますでしょうか。

querykumaさんから回答をいただき、新しい疑問点を追加しました。

送信ボタンを押すと、エディタ内の文書をデータとして取ってくる、getData()を同じように使ってみましたが、エラーが発生しました

JavaScript
1<head>
2    <meta charset="utf-8">
3    <title>CKEditor 5 – Classic editor</title>
4    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
5</head>
6<body>
7    <h1>Classic editor</h1>
8    <textarea name="content" id="editor">
9        &lt;p&gt;This is some sample content.&lt;/p&gt;
10    </textarea>
11  <input type="submit" value="送信" onclick="func1">
12    <script>
13        ClassicEditor
14    .create( document.querySelector( '#editor' ) )
15    .then( editor => {
16        console.log( editor );
17        
18
19    } )
20    .catch( error => {
21        console.error( error );
22    } );
23    var func1 = function(){
24      const data = editor.getData(); 
25        console.log(data);
26    };
27    </script>
28</body>
29</html>

解決するには、何を勉強したらよいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

id="editor"のeditorではなくthenの中のeditor変数に対して使用しましょう。

diff
1<html lang="en">
2<head>
3    <meta charset="utf-8">
4    <title>CKEditor 5 – Classic editor</title>
5    <script src="ckeditor.js"></script>
6</head>
7<body>
8    <h1>Classic editor</h1>
9    <textarea name="content" id="editor">
10        &lt;p&gt;This is some sample content.&lt;/p&gt;
11    </textarea>
12
13    <script>
14        ClassicEditor
15    .create( document.querySelector( '#editor' ) )
16    .then( editor => {
17        console.log( editor );
18+   	editor.setData( '<p>Some text.</p>' );
19    } )
20    .catch( error => {
21        console.error( error );
22    } );
23-   editor.setData( '<p>Some text.</p>' );
24
25    </script>
26</body>
27</html>

投稿2019/08/26 23:27

querykuma

総合スコア777

kingsma20576829

2019/08/28 08:52

ありがとうございます。しかし勉強不足のため、なぜthenの中に入れると、正常に動くのかが分かりません。最終的には、ユーザーに文章を入力してもらい、それをphpmyadminでDBに保存し、好きな時にDBから取ってきて、閲覧・修正ができるようにしたいです。今のままでは、ClassicEditorを作成したときにしか、メソッドが使えなくて、困っています。例えば、ボタンを押したときに、getData()メソッドを使うには、どうしたらよいでしょうか？

querykuma

2019/08/28 23:55

> なぜthenの中に入れると、正常に動くのかが分かりません変数のスコープを学んでください。基本的には変数は(かっこ){かっこ}内でしか有効になりません。 > ボタンを押したときに、getData()メソッドを使うにはたとえばですがthenの中でeditorをグローバル変数g_editorに代入するとできますね。

行動規範の内容に同意します