Lấy giá trị, gán giá trị và cập nhật giá trị của CKEditor bằng Javascript
by My Love
24/05/2019, 8:57 AM | 29/05/2019, 3:01 PM | 2.1K | 054
Trong nhiều trường hợp bạn muốn lấy giá trị của CKEditor nhưng nó lại trả về rỗng. Hay bạn sử dụng ASP.Net với Webfrom giá trị của CKEditor luôn rỗng trong code behind thì có thể tham khảo cách đơn giản sau đây :
1. Lấy giá trị, gán giá trị của CKEditor với getData() và setData()
Ví dụ bạn có một
<textarea> và chèn CKEditor vào như sau :
<textarea id="TextID"></textarea>
<input id="Save" type="submit" value="TEST"/>
<script>
CKEDITOR.replace("TextID");
</script>
- Bây giờ khi bạn lấy giá trị của CKEditor theo cách thông thường như sau sẽ trả về rỗng, mặc dù bạn có nhập dữ liệu văn bản vào CKEditor rồi :
<script language="javascript">
$(document).ready(function(){
$('#Save').on('click', function(){
// Trả về rỗng
alert($('#TextID').val());
});
});
</script>
- Để giải quyết vấn đề này đơn giản bạn có 2 cách.
Cách 1 sử dụng
getData() để lấy giữ liệu của CKEditor như sau :
<html>
<head>
<script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://localhost/ckeditor4_full/ckeditor/ckeditor.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#Save').on('click', function(){
var value = CKEDITOR.instances['TextID'].getData()
// alert ra kết quả
alert(value );
});
});
</script>
</head>
<body>
<textarea id="TextID"></textarea>
<script>
CKEDITOR.replace("TextID");
</script>
<input id="Save" type="submit" value="TEST"/>
</body>
</html>
Thay vì sử dụng hàm
val() của jQuery thì bạn sử dụng
getData() sẽ lấy được giá trị của CKEditor.
- Ngược lại với
getData() bạn có thể gán dữ liệu cho CKEditor với
setData()
// với TextID là id của <textarea> CKEditor, value là giá trị muốn gán vào
CKEDITOR.instances['TextID'].setData(value);
-
Cách 2 bạn có thể cập nhật CKEditor với hàm
updateElement() trước khi lấy giá tri như sau.
2. Cập nhật giá trị CKEditor
Để cập nhật giá trị của CKEditor ta sử dụng
updateElement() như sau :
- Nếu có nhiều CKEditor bạn có thể dùng for :
for(var instanceName in CKEDITOR.instances)
CKEDITOR.instances[instanceName].updateElement();
- Hoặc nếu bạn muốn chỉ định một CKEditor nào đó có thể dùng như sau, với
TextID là
id của
<textarea> :
CKEDITOR.instances['TextID'].updateElement();
<html>
<head>
<script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://localhost/ckeditor4_full/ckeditor/ckeditor.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#Save').on('click', function(){
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instanceName].updateElement();
alert($('#TextID').val());
});
});
</script>
</head>
<body>
<textarea id="TextID"></textarea>
<script>
CKEDITOR.replace("TextID");
</script>
<input id="Save" type="submit" value="TEST"/>
</body>
</html>
- Nếu bạn sử dụng
updateElement() mà vẫn không được, thì có thể dùng cách sau :
<script language="javascript">
$(document).ready(function(){
// với TextID là id của <textarea> CKEditor
CKEDITOR.instances['TextID'].on("instanceReady", function () {
//set keyup event
this.document.on("keyup", function () {
CKEDITOR.tools.setTimeout(function () {
$('#TextID').val(CKEDITOR.instances['TextID'].getData());
}, 0);
});
//and paste event
this.document.on("paste", function () {
CKEDITOR.tools.setTimeout(function () {
$('#TextID').val(CKEDITOR.instances['TextID'].getData());
}, 0);
});
//and cut event
this.document.on("cut", function () {
CKEDITOR.tools.setTimeout(function () {
$('#TextID').val(CKEDITOR.instances['TextID'].getData());
}, 0);
});
});
});
</script>
- Nếu trong trang của bạn có nhiều CKEditor thì có thể dùng cách sau :
$(document).ready(function () {
// MyClass là tên class của các <textarea> CKEditor
$('.MyClass').each(function () {
var ID = $(this).attr('id');
CKEDITOR.instances[ID].on("instanceReady", function () {
//set keyup event
this.document.on("keyup", function () {
CKEDITOR.tools.setTimeout(function () {
$("#" + ID).val(CKEDITOR.instances[ID].getData());
}, 0);
});
//and paste event
this.document.on("paste", function () {
CKEDITOR.tools.setTimeout(function () {
$("#" + ID).val(CKEDITOR.instances[ID].getData());
}, 0);
});
//and cut event
this.document.on("cut", function () {
CKEDITOR.tools.setTimeout(function () {
$("#" + ID).val(CKEDITOR.instances[ID].getData());
}, 0);
});
});
});
});
Lưu Ý: một chú ý nhỏ với ai dùng ASP.Net Webform là khi thao tác gán CKEditor vào <asp:TexBbox></asp:TextBox> thì nên để
TextMode="MultiLine" nếu không khi lấy dữ liệu từ CSDL gán vào CKEditor sẽ không được, trước mình không chú ý rất hay gặp lỗi này.
- Với việc cập nhật giá trị cho CKEditor như trên sẽ giúp lấy về được giá trị của nó, chúc bạn thành công !