logo icon
Taninut.com
image
image แดชบอร์ดรวม
image ประวัติการจอง
image การตั้งค่า
image ออกจากระบบ

150

Update
Delete
Back
 
 
 
Content ID150
Category ID2
Writer ID(not set)
User ID(not set)
Lang Modeth
Content NameTinyMCE กำหนด plugins และ external_plugins ใน Yii2 Advanced Framework
Content UrlTinyMCE-กำหนด-plugins-และ-external_plugins -ใน-Yii2-Advanced-Framework
Content Desc<p>Yii2 TinyMCE คือ Extension ที่ใช้สำหรับการใส่ Editor ลงใน Form ของเว็บไซต์ โดยใช้ TinyMCE ซึ่งเป็น Open Source JavaScript WYSIWYG Editor ที่มีความสามารถในการแสดงผลแบบ Rich Text รวมถึงการจัดการรูปแบบตัวอักษร การแทรกรูปภาพ การจัดหน้า และอื่นๆ อีกมากมาย</p>
<p></p>
<p>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 ของเว็บไซต์<br>ใน Yii2 ถ้าต้องการกำหนด plugins ของ TinyMCE ใน clientOptions สามารถทำได้ดังนี้</p>
<p></p>
<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"><span class="hljs-keyword">use</span> <span class="hljs-title">dosamigos</span>\<span class="hljs-title">tinymce</span>\<span class="hljs-title">TinyMce</span>;

<span class="hljs-keyword">echo</span> <span class="hljs-title class_">TinyMce</span>::<span class="hljs-title function_ invoke__">widget</span>([
<span class="hljs-string">'name'</span> =&gt; <span class="hljs-string">'mytextarea'</span>,
<span class="hljs-string">'clientOptions'</span> =&gt; [
<span class="hljs-string">'plugins'</span> =&gt; [
<span class="hljs-string">"advlist autolink lists link image charmap print preview anchor"</span>,
<span class="hljs-string">"searchreplace visualblocks code fullscreen"</span>,
<span class="hljs-string">"insertdatetime media table contextmenu paste"</span>
],
<span class="hljs-string">'toolbar'</span> =&gt; <span class="hljs-string">"undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"</span>
]
]);</code></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"></code></div>
</div>
<p>ในตัวอย่างข้างต้น กำหนด plugins ต่าง ๆ ให้กับ TinyMCE ด้วยตัวแปร <code>plugins</code> ที่เป็นอาร์เรย์ของชื่อ plugin ที่ต้องการใช้งาน และกำหนด toolbar ด้วยตัวแปร <code>toolbar</code> ที่เป็นสตริงของเครื่องมือที่ต้องการแสดงใน editor นั้น ๆ</p>
<p></p>
<p>ใน Yii2 ถ้าต้องการกำหนด plugins ของ TinyMCE external_plugins สามารถทำได้ดังนี้</p>
<p></p>
<ol>
<li>ดาวน์โหลดไฟล์ zip ของ TinyMCE จาก <a href="https://www.tiny.cloud/get-tiny/self-hosted/" target="_new">https://www.tiny.cloud/get-tiny/self-hosted/</a></li>
<li>แตกไฟล์และนำโฟลเดอร์ tinymce ไปวางไว้ในโฟลเดอร์ web ของโปรเจกต์ Yii2</li>
<li>กำหนดโค้ดตามตัวอย่างด้านล่างเพื่อกำหนดการใช้งาน plugins และ toolbar ให้กับ TinyMCE ใน Yii2</li>
</ol>
<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"><span class="hljs-keyword">use</span> <span class="hljs-title">dosamigos</span>\<span class="hljs-title">tinymce</span>\<span class="hljs-title">TinyMce</span>;

<span class="hljs-keyword">echo</span> <span class="hljs-title class_">TinyMce</span>::<span class="hljs-title function_ invoke__">widget</span>([
<span class="hljs-string">'name'</span> =&gt; <span class="hljs-string">'mytextarea'</span>,
<span class="hljs-string">'clientOptions'</span> =&gt; [
<span class="hljs-string">'external_plugins'</span> =&gt; [
<span class="hljs-string">'myplugin'</span> =&gt; <span class="hljs-string">'/path/to/tinymce/plugins/myplugin/plugin.min.js'</span>,
// เพิ่ม plugins อื่น ๆ ตามต้องการได้
],
<span class="hljs-string">'toolbar'</span> =&gt; <span class="hljs-string">'myplugin | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link image media | forecolor backcolor emoticons'</span>,
// กำหนด toolbar ตามต้องการ
]
]);
</code></div>
</div>
<p>ในตัวอย่างข้างต้น กำหนด external_plugins ของ TinyMCE ด้วยตัวแปร <code>external_plugins</code> ที่เป็นอาร์เรย์ของชื่อ plugin และตำแหน่งของไฟล์ plugin ที่ต้องการใช้งาน และกำหนด toolbar ด้วยตัวแปร <code>toolbar</code> ที่เป็นสตริงของเครื่องมือที่ต้องการแสดงใน editor นั้น ๆ</p>
<p></p>
<p>Yii2 TinyMCE มี external_plugins ต่าง ๆ ที่สามารถใช้งานได้ตามความต้องการของโปรเจกต์ ตัวอย่างเช่น</p>
<p></p>
<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 View3547
Content Thumb Highlight
Content Thumb/uploads/article/918NiAqkg4.png
Content Img AltTinyMCE กำหนด plugins และ external_plugins ใน Yii2 Advanced Framework
Content TagTinyMCE,Yii2 Advanced Framework ,external_plugins,plugins,TinyMCE กำหนด plugins และ external_plugins
Content Date(not set)
Active Status1
Sort99999
Meta TitleTinyMCE กำหนด plugins และ external_plugins ใน Yii2 Advanced Framework
Meta DescTinyMCE กำหนด plugins และ external_plugins ใน Yii2 Advanced Framework
Meta KeywordTinyMCE,Yii2 Advanced Framework ,external_plugins,plugins,TinyMCE กำหนด plugins และ external_plugins
Og TitleTinyMCE กำหนด plugins และ external_plugins ใน Yii2 Advanced Framework
Og DescTinyMCE กำหนด plugins และ external_plugins ใน Yii2 Advanced Framework
Status1
Create Date Time2023-04-01 19:09:30
Update Date Time2023-04-03 16:18:47
Create By
Update By