Update Article: 150

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

Yii2 TinyMCE คือ Extension ที่ใช้สำหรับการใส่ Editor ลงใน Form ของเว็บไซต์ โดยใช้ TinyMCE ซึ่งเป็น Open Source JavaScript WYSIWYG Editor ที่มีความสามารถในการแสดงผลแบบ Rich Text รวมถึงการจัดการรูปแบบตัวอักษร การแทรกรูปภาพ การจัดหน้า และอื่นๆ อีกมากมาย

Extension นี้ชื่อว่า <code>yii2-tinymce</code> และถูกพัฒนาโดย <code>dosamigos</code> โดย Extension นี้สามารถติดตั้งผ่าน Composer ได้ง่ายๆ โดยใช้คำสั่ง <code>composer require --prefer-dist "dosamigos/yii2-tinymce-widget:*"</code> แล้วเรียกใช้ Extension นี้ใน View โดยการใช้ <code>dosamigos\tinymce\TinyMce</code> Widget ตามที่ต้องการใน Form ของเว็บไซต์ ใน Yii2 ถ้าต้องการกำหนด plugins ของ TinyMCE ใน clientOptions สามารถทำได้ดังนี้

<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php">use dosamigos\tinymce\TinyMce;

echo TinyMce::widget([
 'name' =&gt; 'mytextarea',
 'clientOptions' =&gt; [
 'external_plugins' =&gt; [
 'myplugin' =&gt; '/path/to/tinymce/plugins/myplugin/plugin.min.js',
 // เพิ่ม plugins อื่น ๆ ตามต้องการได้
 ],
 'toolbar' =&gt; 'myplugin | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link image media | forecolor backcolor emoticons',
 // กำหนด toolbar ตามต้องการ
 ]
]);
</code></div>
</div>
ในตัวอย่างข้างต้น กำหนด external_plugins ของ TinyMCE ด้วยตัวแปร <code>external_plugins</code> ที่เป็นอาร์เรย์ของชื่อ plugin และตำแหน่งของไฟล์ plugin ที่ต้องการใช้งาน และกำหนด toolbar ด้วยตัวแปร <code>toolbar</code> ที่เป็นสตริงของเครื่องมือที่ต้องการแสดงใน editor นั้น ๆ

Yii2 TinyMCE มี external_plugins ต่าง ๆ ที่สามารถใช้งานได้ตามความต้องการของโปรเจกต์ ตัวอย่างเช่น

<ol>
<li>advlist - ใช้สำหรับการแสดงรายการอัตโนมัติ</li>
<li>autolink - ใช้สำหรับการแปลง URL เป็นลิงก์อัตโนมัติ</li>
<li>lists - ใช้สำหรับการสร้างรายการแบบต่าง ๆ</li>
<li>link - ใช้สำหรับการเพิ่มลิงก์</li>
<li>image - ใช้สำหรับการเพิ่มรูปภาพ</li>
<li>charmap - ใช้สำหรับการแทรกอักขระพิเศษ</li>
<li>print - ใช้สำหรับการพิมพ์</li>
<li>preview - ใช้สำหรับการดูตัวอย่างของเนื้อหาที่กำลังแก้ไข</li>
<li>hr - ใช้สำหรับการเพิ่มเส้นแบ่ง</li>
<li>anchor - ใช้สำหรับการเพิ่มลิงก์หน้า</li>
<li>pagebreak - ใช้สำหรับการแทรกการแบ่งหน้า</li>
<li>searchreplace - ใช้สำหรับการค้นหาและแทนที่เนื้อหา</li>
<li>wordcount - ใช้สำหรับการนับจำนวนคำ</li>
<li>visualblocks - ใช้สำหรับการแสดงบล็อกเนื้อหาในตัวแก้ไข</li>
<li>visualchars - ใช้สำหรับการแสดงอักขระในตัวแก้ไข</li>
<li>code - ใช้สำหรับการแทรกโค้ด</li>
<li>fullscreen - ใช้สำหรับการแสดงเนื้อหาแบบเต็มหน้าจอ</li>
<li>insertdatetime - ใช้สำหรับการแทรกวันที่และเวลา</li>
<li>media - ใช้สำหรับการแทรกสื่อต่าง ๆ</li>
<li>nonbreaking - ใช้สำหรับการแทรกเครื่องหมายตัวแบ่งแบบไม่ตัดสตริง</li>
<li>save - ใช้สำหรับการบันทึกเนื้อหา</li>
</ol>

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home