如何获取 CKEditor 5 的值?
How to get value of CKEditor 5?
我希望能够 return 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 之前的文本区域获取数据:
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。
第一件事是 - 我不想在我使用编辑器的每个页面中初始化 ckEditor。
第二件事是 - 有时我需要通过名称访问 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();
实际上,有很多方法可以实现此目的,但这种方法非常简短且经过优化,而且此设置可以与单个和多个 <textarea>
完美配合。
document.querySelectorAll('.ckeditor').forEach(e => {
ClassicEditor
.create(e)
.then(editor => {
editor.model.document.on('change:data', () => {
e.value = editor.getData();
});
})
.catch(error => {
console.error(error);
});
})
<script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>
<!--Native Text Field-->
<textarea class="ckeditor"></textarea>
最简单的方法:
//global vars
var CKEditorArray = [];//CKEditor access array
//initialize function
function CKEditorInit(selector_name){
ClassicEditor
.create(document.querySelector(selector_name),{
//some options
toolbar: {
items: [
'undo', 'redo', '|',
'fontSize', 'bold', 'italic', 'underline', '|',
'alignment', 'bulletedList', 'numberedList', '|',
'outdent', 'indent', '|',
'fontColor', 'fontBackgroundColor', '|',
'sourceEditing'
],
},
})
.then(editor => {
console.log(editor);
CKEditorArray[selector_name] = editor;//save editor with selector name as index to array
})
.catch(error => {
console.error(error);
});
}
//then we need to init CKEditor, we just call function
CKEditorInit('#textarea-id');
//access to Editor like:
alert(CKEditorArray['#textarea-id'].getData());
我希望能够 return 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 之前的文本区域获取数据:
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。
第一件事是 - 我不想在我使用编辑器的每个页面中初始化 ckEditor。
第二件事是 - 有时我需要通过名称访问 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();
实际上,有很多方法可以实现此目的,但这种方法非常简短且经过优化,而且此设置可以与单个和多个 <textarea>
完美配合。
document.querySelectorAll('.ckeditor').forEach(e => {
ClassicEditor
.create(e)
.then(editor => {
editor.model.document.on('change:data', () => {
e.value = editor.getData();
});
})
.catch(error => {
console.error(error);
});
})
<script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>
<!--Native Text Field-->
<textarea class="ckeditor"></textarea>
最简单的方法:
//global vars
var CKEditorArray = [];//CKEditor access array
//initialize function
function CKEditorInit(selector_name){
ClassicEditor
.create(document.querySelector(selector_name),{
//some options
toolbar: {
items: [
'undo', 'redo', '|',
'fontSize', 'bold', 'italic', 'underline', '|',
'alignment', 'bulletedList', 'numberedList', '|',
'outdent', 'indent', '|',
'fontColor', 'fontBackgroundColor', '|',
'sourceEditing'
],
},
})
.then(editor => {
console.log(editor);
CKEditorArray[selector_name] = editor;//save editor with selector name as index to array
})
.catch(error => {
console.error(error);
});
}
//then we need to init CKEditor, we just call function
CKEditorInit('#textarea-id');
//access to Editor like:
alert(CKEditorArray['#textarea-id'].getData());