หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

Vue-tinymce-editor

ส่วนประกอบนี้ให้การใช้ประโยชน์จาก tinymce สำหรับนักพัฒนา Vue ได้อย่างง่ายดาย

การสาธิต

คุณสามารถดูตัวอย่างและตัวอย่างในหน้านี้: ตัวอย่างและตัวอย่าง

การติดตั้ง 

$ npm install vue-tinymce-editor

วิธีใช้ 

 import Vue from 'vue'
import tinymce from 'vue-tinymce-editor'
Vue . component ( 'tinymce' , tinymce )

คุณอาจใช้ส่วนประกอบในมาร์กอัปของคุณ 

 < tinymce id =" d1 " v-model =" data " > </ tinymce > 
 export default {
    data ( ) {
        return {
            data : ''
        } ;
    }
}

คุณสมบัติ

คุณสมบัติ พิมพ์ ค่าเริ่มต้น คำอธิบาย
รหัสประจำตัว จำเป็น, สตริง รหัสของ Textarea ของ Component
Toolbar1 สาย 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat' แถบเครื่องมือ 1 ของ tinymce
Toolbar2 สาย - แถบเครื่องมือ 2 ของ tinymce
ปลั๊กอิน อาร์เรย์ ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality','template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample'] ปลั๊กอินของ tinymce คุณต้องโหลด
other_options อาร์เรย์ - ตัวเลือก tinymce อื่น ๆ คุณยังสามารถแทนที่ตัวเลือกเริ่มต้นของเรา
อย่างอ่านอย่างเดียว บูลีน เท็จ เปิดใช้งานหรือปิดใช้งานตัวแก้ไข

เหตุการณ์

เหตุการณ์ พารามิเตอร์ คำอธิบาย
EditorChange เหตุการณ์ เหตุการณ์นี้จะถูกเรียกเมื่อ tinymce เรียก onchane
บรรณาธิการ บรรณาธิการ เหตุการณ์นี้จะถูกเรียกหลังจากโปรแกรมแก้ไขเริ่มต้น

การแปลเป็นภาษาท้องถิ่น

หากคุณต้องการใช้ tinymce ในภาษาอื่น ๆ โปรดทำตามขั้นตอนเหล่านี้:

  1. ดาวน์โหลดชุดภาษาที่คุณต้องการใช้จากที่นี่
  2. แกะไฟล์ภาษาลงในเส้นทางที่คุณต้องการซึ่งสามารถเข้าถึงได้จากภายนอกและมี URL ชี้ไปที่มัน
  3. สุดท้ายตั้งค่า language_url ใน other_options ไปยัง URL ที่ชี้ไปที่ไฟล์ภาษา

ตัวอย่างเช่น: 

 export default {
    data ( ) {
        return {
            data : '' ,
            options : {
                language_url : 'http://example.com/js/langs/fa_IR.js' //This url points to location of persian language file.
            }
        } ;
    }
} 
 < tinymce id =" d1 " v-model =" data " :other_options =" options " > </ tinymce >

การเข้าถึง Tinymce Editor โดยตรง

คุณสามารถเข้าถึง tinymce เองได้โดยการตั้งค่าการอ้างอิงเป็นส่วนประกอบนี้: 

 < tinymce id =" d1 " v-model =" data " ref =" tm " > </ tinymce >

จากนั้นคุณสามารถเข้าถึงตัวแก้ไขได้โดยโทร: 

 this . $refs . tm . editor

บริจาค

ถ้าคุณชอบโครงการนี้และมันก็มีประโยชน์สำหรับคุณอย่าปล่อยให้มันตาย ช่วยฉันทำต่อไป ขอบคุณ หรือคุณสามารถซื้อกาแฟให้ฉันได้

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด