vue document editor

Vue-Document-Editor เป็นตัวแก้ไขข้อความที่หลากหลายที่สร้างขึ้นบน Vue.js โดยใช้การใช้เบราว์เซอร์ ที่เป็นที่ชื่นชอบของ เบราว์เซอร์และกลอุบาย JavaScript บางส่วนเพื่อกระจายเนื้อหาผ่านหน้ากระดาษขนาดใหญ่ ส่วนใหญ่ได้รับการออกแบบมาเพื่ออนุญาตให้มี การปรับเปลี่ยนเป้าหมาย ไปยังเอกสารที่จัดรูปแบบล่วงหน้าโดยใช้ HTML หรือ เทมเพลตแบบโต้ตอบ

แพ็คเกจนี้ไม่ได้ตั้งใจที่จะแทนที่ตัวแก้ไขเอกสารที่เหมาะสมด้วยฟังก์ชั่นเต็มรูปแบบ หากคุณกำลังมองหาโปรเซสเซอร์ Word ที่ทรงพลังลองดู CKEditor สำหรับ Vue.js หรือ Collabora Online Development Edition

คุณสมบัติ

ดูการสาธิตสด

• ใช้ส่วนประกอบ vue.js เป็นเทมเพลตหน้าแบบโต้ตอบ
• การแยกหน้าคำต่อคำ ( ยังคงทดลอง-เฉพาะสำหรับเนื้อหา HTML ธรรมดา )
• การพิมพ์พื้นเมืองที่เข้ากันได้
• รูปแบบเอกสารแบบไดนามิกและระยะขอบในมิลลิเมตร
• ซ้อนทับหน้าแบบกำหนดเอง (ส่วนหัว, ส่วนท้าย, หมายเลขหน้า)
• การแบ่งหน้า
• โหมดการซูมสมาร์ทซูมและหน้า
• คำนวณสไตล์ข้อความที่ตำแหน่ง Caret
• ย้ายไปที่ vue.js 3.x (เพื่อใช้กับ Vue 2.x เลือกไลบรารีเวอร์ชัน 1.x)

แพ็คเกจนี้ไม่มีแถบเครื่องมือใด ๆ การสาธิตมี vue-file-toolbar-menu สำหรับแถบเครื่องมือ

การติดตั้ง

ในโครงการ Vue.js 3.x ของคุณ:

 npm install vue-document-editor

ในโครงการ vue.js 2.x ของคุณ:

 npm install vue-document-editor@1

หากคุณต้องการไฟล์คงที่ให้นำเข้าสินทรัพย์จากโฟลเดอร์ dist

ตัวอย่างพื้นฐาน

myComponent.vue

< template >
  < div style = " font-family : Avenir, sans-serif " >
    < vue-document-editor v-model:content = " content " /> <!-- Vue 3 syntax -->
    <!-- <vue-document-editor :content.sync="content" /> --> <!-- Vue 2 syntax -->
  </ div >
</ template >

< script >
import VueDocumentEditor from ' vue-document-editor '

export default {
  components : { VueDocumentEditor },
  data () {
    return { 
      content : [ " <h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows. " ]
    }
  }
}
</ script >

ตัวอย่างเดียวกันโดยใช้ไฟล์คงที่ที่โหลดด้วย CDN (Vue 3)

 < html >
< head >
  < script src =" https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js " > </ script >
  < script src =" https://cdn.jsdelivr.net/npm/vue-document-editor@2/dist/VueDocumentEditor.umd.min.js " > </ script >
  < link href =" https://cdn.jsdelivr.net/npm/vue-document-editor@2/dist/VueDocumentEditor.css " rel =" stylesheet " >
</ head >
< body >
  < div id =" app " >
    < div style =" font-family: Avenir, sans-serif " >
      < vue-document-editor v-model:content =" content " />
    </ div >
  </ div >
  < script >
  const app = Vue . createApp ( {
    components : { VueDocumentEditor } ,
    data ( ) {
      return { 
        content : [ "<h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows." ]
      }
    }
  } ) . mount ( '#app' ) ;
  </ script >
</ body >
</ html >

ตัวอย่างเดียวกันโดยใช้ไฟล์คงที่ที่โหลดด้วย CDN (Vue 2)

 < html >
< head >
  < script src =" https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js " > </ script >
  < script src =" https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.umd.min.js " > </ script >
  < link href =" https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.css " rel =" stylesheet " >
</ head >
< body >
  < div id =" app " >
    < div style =" font-family: Avenir, sans-serif " >
      < vue-document-editor :content.sync =" content " />
    </ div >
  </ div >
  < script >
  var app = new Vue ( {
    el : '#app' ,
    components : { VueDocumentEditor } ,
    data ( ) {
      return { 
        content : [ "<h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows." ]
      }
    }
  } )
  </ script >
</ body >
</ html > 

ตัวอย่างที่สมบูรณ์

ดูไฟล์ demo.vue และไฟล์ InvoIcetemplate.ce.vue ที่สอดคล้องกับการสาธิตสด

API

สำหรับรายการอุปกรณ์ประกอบฉากข้อมูลและตัวแปรสไตล์: อ่าน API

ปัญหา / ข้อ จำกัด ที่ทราบ

• UNDO / REDO : Native UNDO / REDO จำเป็นต้องเขียนใหม่เป็นกลไกการแยกปรับเปลี่ยนเนื้อหา HTML ในทุกอินพุตดังนั้น Navigator จะหายไป คุณต้องใช้มันด้วยตัวเองโดยดูการอัปเดต content และจัดเก็บไว้ในสแต็กจากนั้นกู้คืนพวกเขา Demo.Vue ใช้สิ่งนี้ นอกจากนี้แม่แบบอินเทอร์แอคทีฟของคุณจำเป็นต้องมีการจัดการการเลิกทำ/ทำซ้ำที่กำหนดเองหากฟิลด์แก้ไขได้ของพวกเขาไม่ได้ซิงค์กับ content
• ประสิทธิภาพ : สำหรับตอนนี้ข้อความขนาดใหญ่จะต้องแบ่งออกเป็นหลายย่อหน้าและหมายเลขหน้าขนาดใหญ่สามารถทำให้เอกสารทั้งหมดช้าลง (ดูปัญหา 14)
• Safari Print : Safari เพิ่มระยะขอบพิมพ์เว้นแต่คุณจะเลือกรูปแบบกระดาษไร้ขอบในกล่องพิมพ์ สิ่งนี้จะต้องทำด้วยตนเอง ฉันเดาว่ายังไม่มีวิธีแก้ปัญหาสำหรับปัญหานี้
• ไม่รวม ตารางรูปภาพ : การจัดวางภาพ/ตารางและการปรับขนาด คุณสามารถใช้งานได้โดยเฉพาะตามความต้องการของคุณ อย่างไรก็ตามแถวตารางแบ่งได้ดีในหลาย ๆ หน้า
• การแยกหน้าไม่ทำงานกับเทมเพลตหน้า Vue : ไลบรารีนี้ไม่สามารถดำเนินการกับเนื้อหาที่จัดการโดย Vue (เช่น. vue page templates) เนื่องจาก Vue หายไปและหน้าแม่แบบจะไม่โต้ตอบอีกต่อไป ทางเลือกเดียวที่คุณมีคือการเขียน HTML ธรรมดาในเนื้อหาแทนที่จะใช้เทมเพลต. vue คุณสามารถทำการโต้ตอบได้โดยใช้องค์ประกอบ HTML กับแอตทริบิวต์ contenteditable="false" และ onclick="..." ที่มีรหัส JavaScript ของคุณเอง

การพัฒนาโครงการ

• npm run serve Compiles ให้บริการและการสาธิตการรีไลโหลดร้อนเพื่อการพัฒนา
• npm run build Compiles และ minifies ไฟล์การผลิตและการสาธิต

การออกใบอนุญาต

ลิขสิทธิ์ (c) 2020 Romain Lamothe, ใบอนุญาต MIT