CKEditor ขอความช่วยเหลือหน่อยครับ
พอดีจะทำ blockquote ซึ่งต้องใช้งานร่วมกับ CKEditor API ติดอยู่ปัญหาที่ คลิ๊กเลือก blockquote ของ Comment มันกลับเอาแต่ Comment ที่ 1 มาตลอด ช่วยแก้ปัญหาหน่อยคราฟ
ตัวอย่างโค๊ด ...
<script type="text/javascript">
function InsertHTML()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.cksource.com/...itor.html#insertHtml
oEditor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
</script>
</head>
<body>
<form action="sample_posteddata.php" method="post">
<textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1' );
//]]>
</script>
<input onclick="InsertHTML();" type="button" value="Insert HTML" />
<br />
<textarea cols="100" id="htmlArea" rows="3">
<blockquote>
Comment1
</blockquote> </textarea>
<br /><input onclick="InsertHTML();" type="button" value="Insert HTML" />
<br />
<textarea cols="100" id="htmlArea" rows="3" >
<blockquote>
Comment2
</blockquote> </textarea>
</form>
ตัวอย่างโค๊ด ...
<script type="text/javascript">
function InsertHTML()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.cksource.com/...itor.html#insertHtml
oEditor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
</script>
</head>
<body>
<form action="sample_posteddata.php" method="post">
<textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1' );
//]]>
</script>
<input onclick="InsertHTML();" type="button" value="Insert HTML" />
<br />
<textarea cols="100" id="htmlArea" rows="3">
<blockquote>
Comment1
</blockquote> </textarea>
<br /><input onclick="InsertHTML();" type="button" value="Insert HTML" />
<br />
<textarea cols="100" id="htmlArea" rows="3" >
<blockquote>
Comment2
</blockquote> </textarea>
</form>
1. เรียกข้อความที่จะ quote ด้วย Ajax โดยการเก็บ id ของสิ่งที่ต้องการโค้ดไว้ที่ปุ่ม quote และเมื่อต้องการจะ quote ก็กดปุ่มนี้ และจะส่งไปอ่านข้อความมาด้วย Ajax และเอาข้อคามที่ได้ใส่ไปยัง editor เช่น
<img src=quote.png alt=quote onclick="doQuote(1)">
1 หมายถึง id ของกระทู้ที่ต้องการ quote หรือ
2. เก็บข้อความที่ต้องการ quote ไว้ที่ฟัวก์ชั่นเลย วิธีนี้ การ quote จะไม่ต้องเรียกไปยัง Ajax วึ่งจะเร็วกว่า แต่ข้อเสียก็คือ ถ้าข้อความยาวๆ อาจทำให้เพจโหลดช้าลง
<img src=quote.png alt=quote onclick="doQuote('[ quote r=1 ]อ้างอิงคำถามจากคำตอบที่ 1[ /quote ]')">
ใส่ id ลงไปที่ onclick เลยครับ
<img src=quote.png onclick="doQuote(<?php $item['id']?>)">
ปัญหาจะอยู่ที่ doQuote ครับ ซึ่งที่ doQuote จะต้องไปอ่นข้อความจริงๆออกมาก่อน แล้วจึงจะนำข้อความที่ได้ไปใส่ลงใน editor
function doQuote(id){
// ส่ง ajax ไปอ่านข้อมูลจาก id ที่ getquote.php
send('getquote.php', 'id=' + id, function(xhr){
// ค่าตอบกลับจาก Ajax นำไปใส่ลง editor
var oEditor = CKEDITOR.instances.editor1;
oEditor.insertHtml(xhr.responseText);
});
}
เขียนคร่าวๆให้ดูนะครับ ไปปรับให้ใช้งานจริงได้เองละกัน
ปล. ฟังก์ชั่น send เป็นฟังก์ชั่น Ajax ของ GCMS นะครับ
555+++
function doQuote(value){
// value ส่งมาจากการคลิกไอคอน เอามาใส่ ลงใน editor ได้ตรงๆ
var oEditor = CKEDITOR.instances.editor1;
oEditor.insertHtml(value);
}
<?php
// เข้ารหัสข้อความก่อนส่งเข้าใส่ฟังก์ชั่น doQuote ป้องกันตัวอักษรไม่พึงประสงค์
echo '<img src=quote.png alt=quote onclick="doQuote('.rawurlencode($item['detail']).')">';
?>
<script>
function doQuote(value){
// value ส่งมาจากการคลิกไอคอน เอามาใส่ ลงใน editor ได้ตรงๆ
var oEditor = CKEDITOR.instances.editor1;
oEditor.insertHtml(decodeURIComponent(value));
}
</script>