javascript 如何获得CKEditor 5的价值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47013985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get value of CKEditor 5?
提问by Latifa Khalid
I want to be able to return the value of the CKEditor textarea, and also write my text inside it.
我希望能够返回 CKEditor textarea 的值，并在其中写入我的文本。
I used CKEditor 5 CDN. First this my code for the textarea it works fine
我使用了 CKEditor 5 CDN。首先这是我的 textarea 代码它工作正常
<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>
I used to get the data from the textarea before the CKEditor by:
我曾经通过以下方式从 CKEditor 之前的 textarea 获取数据：
var text = $('textarea#editor').val();
and set the data by:
并通过以下方式设置数据：
$('textarea#editor').html("");
but i'm lost now? i tried many ways... what is the correct way?
但我现在迷路了？我尝试了很多方法……正确的方法是什么？
回答by itdoesntwork
You need to get or save the editor created and then use the getData()function.
You can add a .then()on creation to save your editor.
您需要获取或保存创建的编辑器，然后使用该getData()功能。您可以添加一个.then()on 创建来保存您的编辑器。
var myEditor;
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
myEditor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
and then get data using
然后使用获取数据
myEditor.getData();
回答by Rustem Bayetov
I use another way to work with ckEditors.
我使用另一种方式来使用 ckEditors。
First thing is - I don't want to initialize ckEditor in every page where I use Editors.
第一件事是 - 我不想在我使用编辑器的每个页面中初始化 ckEditor。
Second thing is - Sometimes I need to access to ckEditors by name.
第二件事是 - 有时我需要按名称访问 ckEditors。
So, there is my point of view:
所以，有我的观点：
Add to your Layout:
添加到您的布局：
<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>
Use it in your view:
在您的视图中使用它：
<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"/>
A little css:
一点css：
.ck-classic {
display: none;
}
.ck-classic-min {
display: none;
}
Add tiny JS to Layout (better way to add as separated JS file):
将微小的 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;
}
And after that get Data from where you need:
然后从您需要的地方获取数据：
ckEditor("tbxQuestion").getData()
回答by Davie Overman
Using the developer console, I found this to work for me:
使用开发人员控制台，我发现这对我有用：
CKEDITOR.instances.(textarea_id).getData();
CKEDITOR.instances.(textarea_id).getData();
