CKEditorテキストエリアの値を返し、その中にテキストを書き込むことができるようにしたいのですが。
CKEditor 5 CDNを使用しました。まず、これはテキストエリアの私のコードでうまくいきます
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.1/classic/ckeditor.js"></script>
<textarea class="inputStyle" id="editor" name="content" placeholder="Write your email.."></textarea>
<script>ClassicEditor.create(document.querySelector('#editor')).catch( error => { console.error( error ); } ); </script>
私はCKEditorの前にtextareaからデータを取得するために使用しました:
var text = $('textarea#editor').val();
次の方法でデータを設定します。
$('textarea#editor').html("");
でも今迷ってる?私は多くの方法を試しました...正しい方法は何ですか?
作成したエディターを取得または保存してから、 getData()
関数を使用する必要があります。作成時に.then()
を追加して、エディターを保存できます。
var myEditor;
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
myEditor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
を使用してデータを取得する
myEditor.getData();
別の方法でckEditorsを操作します。
まず最初に-Editorsを使用するすべてのページでckEditorを初期化したくない。
2つ目は-ckEditorsに名前でアクセスする必要がある場合があります。
だから、私の視点があります:
レイアウトに追加:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
あなたの見解でそれを使用してください:
<input type="text" name="tbxQuestion" class="ck-classic"/>
<input type="text" name="tbxAnswer1" class="ck-classic-min"/>
<input type="text" name="tbxAnswer2" class="ck-classic-min"/>
<input type="text" name="tbxAnswer3" class="ck-classic-min"/>
少しCSS:
.ck-classic {
display: none;
}
.ck-classic-min {
display: none;
}
レイアウトに小さなJSを追加します(分離されたJSファイルとして追加するより良い方法):
const ckEditorClassicOptions = {
toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'insertTable', 'undo', 'redo'],
heading: {
options: [
{ model: 'paragraph', title: 'Параграф' },
//{ model: 'heading1', view: 'h1', title: 'Heading 1' },
{ model: 'heading2', view: 'h2', title: 'Заголовок 2' },
{ model: 'heading3', view: 'h3', title: 'Заголовок 3' },
{ model: 'heading4', view: 'h4', title: 'Заголовок 4' },
{ model: 'heading5', view: 'h5', title: 'Заголовок 5' }
]
}
};
const ckEditorClassicOptionsMin = {
toolbar: ['bold', 'italic']
};
var allCkEditors = [];
$(document).ready(function() {
// Initialize All CKEditors
allCkEditors = [];
var allHtmlElements = document.querySelectorAll('.ck-classic');
for (var i = 0; i < allHtmlElements.length; ++i) {
ClassicEditor
.create(allHtmlElements[i], ckEditorClassicOptions)
.then(editor => {
allCkEditors.Push(editor);
})
.catch(error => {
console.error(error);
});
}
allHtmlElements = document.querySelectorAll('.ck-classic-min');
for (var j = 0; j < allHtmlElements.length; ++j) {
ClassicEditor
.create(allHtmlElements[j], ckEditorClassicOptionsMin)
.then(editor => {
allCkEditors.Push(editor);
})
.catch(error => {
console.error(error);
});
}
});
function ckEditor(name) {
for (var i = 0; i < allCkEditors.length; i++) {
if (allCkEditors[i].sourceElement.id === name) return allCkEditors[i];
}
return null;
}
その後、必要な場所からデータを取得します。
ckEditor("tbxQuestion").getData()
開発者コンソールを使用して、これは私にとってうまくいくことがわかりました:
CKEDITOR.instances。(textarea_id).getData();