tag:blogger.com,1999:blog-57800749208210663492024-03-05T03:52:50.791-08:00wysiwygAnonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-5780074920821066349.post-86445171691949643282014-09-24T21:12:00.005-07:002014-09-24T21:12:44.049-07:00<img alt="" class="thumb" src="http://www.phatphong.com/public/files/blogs/eb5dc7040768c44bdd87037e6d56b89e.png" /> <!-- Post Content --> <br />
ด้วยความที่อยากหา Editor เทพๆ สักตัวมาใช้ในการเขียนบทความลงบล็อก ซึ่งก่อนหน้านี้ตอนใช้ Drupal ก็ได้ใช้ CKEditor (ติดตั้งแบบ Module ใน Drupal) มาก่อนซึ่งถือว่าตอบโจทย์ได้ดีทีเดียว ก็เลยคิดจะเอามาใช้ในเว็บนี้ ตอนแรกก็คิดอยู่เหมือนกันว่ามันจะยุ่งยากรึป่าว ซึ่งตอนนี้บอกได้เลยว่ามันง่ายโครตๆ แค่บรรทัดเดียวเท่านั้น<br />
ก่อนอื่นขออธิบายก่อนหละกันว่า WYSIWYG คืออะไร WYSIWYG หรือที่อ่านกันว่า วิซซีวิก นั้นย่อมาจาก What You See Is What You Get ซึ่งก็ในทางคอมพิวเตอร์จะหมายถึง ระบบเนื้อหาระหว่างการแก้ไข และเนื้อหาเมื่อแก้ไขเสร็จแล้วมีหน้าตาและรูปแบบเดียวกัน (จาก Wiki)<br />
เอาหละเริ่มกันเลยละกัน ก่อนอื่นก็ไปดาวน์โหลด CKEditor ได้จาก <strong><a href="http://ckeditor.com/download" target="_blank">http://ckeditor.com/download</a> </strong>จากนั้นเราก็จะได้ไฟล์ ckeditor_3.6.zip มา ก็ทำการแตกไฟล์ให้เรียบร้อย<br />
สำหรับตัวอย่างในการใช้งานและการ config ต่างๆ ก็ดูได้จากในโฟลเดอร์ _samples ครับ ข้ามมาถึงวิธีก่อนติดตั้งใช้งานเลยละกัน ก่อนผมอื่นผมก็จะทำการลบ โฟลเดอร์ _samples และ _source ทิ้งไปก่อน จากนั้นก็อัพโหลดโฟลเดอร์หลักนั้นก็คือ ckeditor เข้าไปใน Server ของเรา<br />
ก่อนอื่นเลยก็ใส่ทำการเรียกไฟล์ ckeditor จากไดเรคทอรี่ที่คุณอัพด้วย code ข้างล่างนี้ ใส่ลงในไฟล์ HTML ของคุณ<br />
<div class="dp-highlighter">
<div class="bar">
<div class="tools">
<a href="http://www.phatphong.com/#">view plain</a><a href="http://www.phatphong.com/#">copy to clipboard</a><a href="http://www.phatphong.com/#">print</a><a href="http://www.phatphong.com/#">?</a></div>
</div>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">script</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"ckeditor/ckeditor.js"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/javascript"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">script</span><span class="tag">></span><span> </span></span></li>
</ol>
</div>
<pre class="xhtml" name="code" style="display: none;">
</pre>
สำหรับวิธีเรียกใช้งานแบบง่ายๆ มี 2 วิธีต่อไปนี้<br />
วิธีแรกก็คือกำหนด Class="ckeditor" ใน textarea ของคุณ<br />
<div class="dp-highlighter">
<div class="bar">
<div class="tools">
<a href="http://www.phatphong.com/#">view plain</a><a href="http://www.phatphong.com/#">copy to clipboard</a><a href="http://www.phatphong.com/#">print</a><a href="http://www.phatphong.com/#">?</a></div>
</div>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">textarea</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"editor1"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"ckeditor"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">textarea</span><span class="tag">></span><span> </span></span></li>
</ol>
</div>
<pre class="xhtml" name="code" style="display: none;"><textarea class="ckeditor" name="editor1"></textarea>
</pre>
และอีกวิธีก็ง่ายเช่นกันคือ การใช้ JavaScript Code และก็กำหนด id ของ textarea ของคุณ<br />
<div class="dp-highlighter">
<div class="bar">
<div class="tools">
<a href="http://www.phatphong.com/#">view plain</a><a href="http://www.phatphong.com/#">copy to clipboard</a><a href="http://www.phatphong.com/#">print</a><a href="http://www.phatphong.com/#">?</a></div>
</div>
<ol class="dp-c">
<li class="alt"><span><span>CKEDITOR.replace( </span><span class="string">'textarea_id'</span><span> ); </span></span></li>
</ol>
</div>
<pre class="javascript" name="code" style="display: none;">CKEDITOR.replace( 'textarea_id' );
</pre>
<div style="text-align: center;">
<img alt="" src="http://www.phatphong.com/public/files/preview-ckeditor.png" /></div>
สำหรับคนที่อยาก config เพิ่มเติมก็ไม่ยาก ลองไปศึกษาในโฟลเดอร์ _samples ดูจะเห็นว่ามีตัวอย่างการใช้งานทั้งหมดอยู่แล้ว<br />
ดู Demo ได้ที่ <a href="http://ckeditor.com/demo" target="_blank"><strong>http://ckeditor.com/demo</strong></a><br />
<br />
<!-- Post Links --> <br />
<div class="clearfix">
</div>
<div class="hr clearfix">
</div>
<!-- Comment's List --> <br />
<div class="cleared">
</div>
<div id="disqus_thread">
<iframe allowtransparency="true" data-disqus-uid="2" frameborder="0" horizontalscrolling="no" id="dsq-2" scrolling="no" src="http://disqus.com/embed/comments/?base=default&disqus_version=99686db6&f=phatphong&t_u=http%3A%2F%2Fwww.phatphong.com%2Fblog%2F24&t_d=%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99%20CKEditor%20WYSIWYG%20Editor%20%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86%20%C2%AB%20Phatphong.com%20%7C%20Coding%20for%20Living&t_t=%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99%20CKEditor%20WYSIWYG%20Editor%20%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86%20%C2%AB%20Phatphong.com%20%7C%20Coding%20for%20Living&s_o=default#2" style="border: currentColor !important; height: 308px !important; overflow: hidden !important; width: 100% !important;" tabindex="0" title="Disqus" verticalscrolling="no" width="100%"></iframe></div>
<noscript>Please enable JavaScript to view the &amp;lt;a href="http://disqus.com/?ref_noscript"&amp;gt;comments powered by Disqus.&amp;lt;/a&amp;gt;</noscript> <!-- Column 2 / Sidebar --> <br />
<div class="grid_4 contact">
<h4>
Categories</h4>
<div class="hr dotted clearfix">
</div>
<ul class="sidebar">
<li><a href="http://www.phatphong.com/category/5">Coding</a></li>
<li><a href="http://www.phatphong.com/category/4"></a></li>
</ul>
</div>
Anonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.com0tag:blogger.com,1999:blog-5780074920821066349.post-58385177748007326312014-09-24T20:57:00.002-07:002014-09-24T21:22:15.355-07:00<div style="text-align: center;">
<span style="color: magenta;"> ประวัติ</span></div>
<div style="text-align: center;">
น.ส. นัทมล พลดงนอก</div>
<div style="text-align: center;">
ชั้น ม.6/2 เลขที่5</div>
<div style="text-align: center;">
โรงเรียนนาสวรรค์พิทยาคม</div>
<div style="text-align: center;">
ต.นาสวรรค์ อ. เมืองบึงกาฬ จ. บึงกาฬ </div>
<div style="text-align: center;">
รหัสไปรษณี 38000 </div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDZe0Z0HAI1jvDbWC1wqSDOBy07VGnVE3XUe7peuEKOhIk5l7lo6q7V715GOzzofYjM7S3-ICsIldHVj5bNFUiN7udO9kLK1sszOxwIg63SfhfRP4pm0L6-7acTbtUoc92b-wkVcd0gUf/s1600/g.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDZe0Z0HAI1jvDbWC1wqSDOBy07VGnVE3XUe7peuEKOhIk5l7lo6q7V715GOzzofYjM7S3-ICsIldHVj5bNFUiN7udO9kLK1sszOxwIg63SfhfRP4pm0L6-7acTbtUoc92b-wkVcd0gUf/s1600/g.jpg" height="200" width="200" /></a></div>
<br />
<span style="color: magenta;">ความรู้ที่ได้รับ</span><br />
ได้ความรู้ว่าเมื่อเราไม่ไช้โปรแกม wysiwyg เวลาเราเขียนตัวเอน หรือตัวหนาเวลาพิมพ์ออกมาก็จะเป็นตัวธรรมดา <br />
<br />
<span style="color: magenta;">แสดงความคิดเห็น</span><br />
<br />
ถ้าเรามีโปรแกมนี้มีอยู่ก็จะได้ไช้งานหรือทำงานได้สะดวก</div>
Anonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.com0tag:blogger.com,1999:blog-5780074920821066349.post-84100263416938481402014-09-24T20:40:00.003-07:002014-09-24T20:47:47.005-07:00<h1 class="firstHeading" id="firstHeading" lang="th">
</h1>
<div class="mw-body-content" id="bodyContent">
<div style="text-align: center;">
<u><span style="color: #0066cc;">WYSIWYG คืออะไร</span></u> </div>
WYSIWYG (ออกเสียง "wiz-ee-wig") editor หรือโปรแกรมที่ยอมให้ผู้พัฒนาเห็นผลลัพธ์สุดท้ายที่จะมองเห็น ขณะที่อินเตอร์เฟซหรือเอกสารได้รับการสร้างขึ้น WYSIWYG เป็นตัวย่อของ "what you see is what you get" WYSIWYG editor สามารถขัดแย้งกับ editor แบบเดิมที่ต้องการให้ผู้พัฒนาเข้าคำสั่งอธิบาย (หรือ markup) และไม่อนุญาตวิธีในการมองเห็นผลลัพธ์ของ markup ทันที WYSIWYG editor เป็นจริงครั้งแรกกับโปรแกรมประมวลผลคำเรียกว่า Bravo คิดค้นโดย Charles Simonyi ที่ Xerox Palo Alto Research Center ในทศวรรษ 1970 นี่กลายมาเป็นพื้นฐานงานของ Simonyi ที่ Microsoft และปฏิรูปเป็นโปรแกรมประยุกต์ WYSIWYG ชื่อ Word และ Excel<br />
HTML WYSIWYG editor เช่น FrontPage ของ Microsoft หรือ PageMill ของ Adobe ห่อหุ้ม markup และอนุญาตผู้พัฒนาเว็บเพจให้คิดถึงภาพทั้งหมดของการปรกาฎของเนื้อหา อย่างไรก็ตาม ต้องมีการแลกคือ บางครั้ง HTML WYSIWYG editor แทรกคำสั่ง markup ที่คิดว่าจำเป็นทั้งหมด จากนั้น ผู้พัฒนาต้องรู้เพียงพอเกี่ยวกับภาษา markup เพื่อกลับไปสู่คำสั่งต้นแหล่งและทำความสะอาด<br />
wysiwyg <br />
<div class="mw-body-content" id="bodyContent">
<div align="left" class="mw-content-ltr" dir="ltr" lang="th">
<dl><dd><i>บทความนี้<a href="http://th.wikipedia.org/wiki/%E0%B8%AB%E0%B8%A1%E0%B8%A7%E0%B8%94%E0%B8%AB%E0%B8%A1%E0%B8%B9%E0%B9%88:%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%A1%E0%B8%B5%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%E0%B8%AD%E0%B8%B1%E0%B8%87%E0%B8%81%E0%B8%A4%E0%B8%A9" title="หมวดหมู่:บทความที่มีชื่อเป็นภาษาอังกฤษ">มีชื่อเป็นภาษาอังกฤษ</a> เนื่องจากยังไม่มีชื่อภาษาไทยที่กระชับ เหมาะสม หรือไม่รู้วิธีอ่านในภาษาไทย</i></dd></dl>
</div>
<div style="text-align: center;">
<b>WYSIWYG</b> (อ่านว่า "วิซซีวิก"<sup class="reference" id="cite_ref-1"><a href="http://th.wikipedia.org/wiki/WYSIWYG#cite_note-1">[1]</a></sup>) ย่อมาจาก <b>W</b>hat <b>Y</b>ou <b>S</b>ee <b>I</b>s <b>W</b>hat <b>Y</b>ou <b>G</b>et เป็นคำศัพท์เฉพาะในทาง<a href="http://th.wikipedia.org/wiki/%E0%B8%84%E0%B8%AD%E0%B8%A1%E0%B8%9E%E0%B8%B4%E0%B8%A7%E0%B9%80%E0%B8%95%E0%B8%AD%E0%B8%A3%E0%B9%8C" title="คอมพิวเตอร์">คอมพิวเตอร์</a> หมายถึงระบบเนื้อหาระหว่างการแก้ไข และเนื้อหาเมื่อแก้ไขเสร็จแล้วมีหน้าตาและรูปแบบเดียวกัน ตัวอย่างเช่น โปรแกรมตระกูล<a class="mw-redirect" href="http://th.wikipedia.org/wiki/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A1%E0%B8%A7%E0%B8%A5%E0%B8%9C%E0%B8%A5%E0%B8%84%E0%B8%B3" title="โปรแกรมประมวลผลคำ">โปรแกรมประมวลผลคำ</a> หรือโปรแกรมช่วยสร้าง<a href="http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%88" title="เว็บเพจ">เว็บเพจ</a> เป็นต้น</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.com0tag:blogger.com,1999:blog-5780074920821066349.post-47759734411454083692014-09-22T03:42:00.002-07:002014-09-22T03:42:33.357-07:00<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/YsUDeHCZAbk?feature=player_embedded' frameborder='0'></iframe></div>
<br />Anonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.com0tag:blogger.com,1999:blog-5780074920821066349.post-50805211246871762912014-09-22T03:39:00.002-07:002014-09-22T03:39:32.890-07:00<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/GMv8IHNsB3Q?feature=player_embedded' frameborder='0'></iframe></div>
<br />Anonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.com0tag:blogger.com,1999:blog-5780074920821066349.post-10942693709954639562014-09-22T03:37:00.002-07:002014-09-22T03:37:20.583-07:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigogbwxZtz5XN64SWNkIvOLfKFvttbsDjErDZWhC1hBhV2xyonC8Coz3e4gttAtvi9Ik1SEkT03olHD81Ka_NpHscMC8GjglW2gvilF-QGd7otYOx4PkrGh7dayjc16t2ZWETilXLGMx38/s1600/%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C%E0%B9%82%E0%B8%AB%E0%B8%A5%E0%B8%94.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigogbwxZtz5XN64SWNkIvOLfKFvttbsDjErDZWhC1hBhV2xyonC8Coz3e4gttAtvi9Ik1SEkT03olHD81Ka_NpHscMC8GjglW2gvilF-QGd7otYOx4PkrGh7dayjc16t2ZWETilXLGMx38/s1600/%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C%E0%B9%82%E0%B8%AB%E0%B8%A5%E0%B8%94.jpg" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/16494910632102799492noreply@blogger.com0