vue document editor

Vue-Document-Enditor هو محرر نص غني تم تصميمه على رأس Vue.js ، باستخدام تطبيق المتصفح القابل للاسترداد الأصلي وبعض خداع JavaScript لنشر المحتوى على الصفحات الورقية. تم تصميمه بشكل أساسي للسماح للتعديلات المستهدفة بالوثائق التي تم تنظيمها مسبقًا باستخدام HTML أو قوالب تفاعلية .

لا تنوي هذه الحزمة استبدال محرر المستندات المناسب بوظائف كاملة. إذا كنت تبحث عن معالج كلمات قوي ، تحقق من 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

لقائمة الدعائم والبيانات ومتغيرات التصميم: اقرأ واجهة برمجة التطبيقات .

القضايا / القيود المعروفة

• التراجع / Redo : يجب إعادة كتابة Undo / Redo الأصلي لأن آلية الانقسام تعدل محتوى HTML في كل إدخال ، بحيث يتم فقد المستكشف. يجب عليك تنفيذها بنفسك من خلال مشاهدة تحديثات content وتخزينها في مكدس ، ثم استعادتها. Demo.vue تنفذ هذا. كما تحتاج القوالب التفاعلية إلى إدارة التراجع/الاحتجاز المخصص إذا لم تتم مزامنة حقولها القابلة للتحرير مع content .
• الأداء : في الوقت الحالي ، يجب تقسيم النصوص الكبيرة إلى فقرات متعددة ويمكن لأرقام الصفحات الكبيرة إبطاء المستند بأكمله (انظر العدد 14).
• طباعة Safari : يضيف Safari هوامش الطباعة إلا إذا اخترت تنسيقًا ورقيًا بلا حدود في مربع الطباعة. هذا يجب أن يتم يدويا. أظن أنه لا يوجد حل عن هذه القضية حتى الآن.
• الجداول ، الصور : لم يتم تضمين وضع الصورة/الجدول وتغيير حجمها. يمكنك تنفيذه خصيصًا لاحتياجاتك. ومع ذلك ، تنقسم صفوف الجدول بشكل جيد على صفحات متعددة.
• لا يعمل تقسيم الصفحة مع قوالب Page Vue : لا يمكن لهذه المكتبة التصرف على المحتوى الذي تديره VUE (مثل قوالب .vue page) ، لأنه بعد ذلك يتم فقدان VUE ولم تعد صفحات القالب تفاعلية. الخيار الوحيد الذي لديك هو كتابة HTML العادي في المحتوى بدلاً من استخدام قوالب .vue. يمكنك القيام بالتفاعل باستخدام عناصر HTML مع السمات contenteditable="false" و onclick="..." التي تحتوي على رمز JavaScript الخاص بك.

تطوير المشروع

• npm run serve تجمع وخدمات وتوضيح للأحمال الساخنة للتنمية
• npm run build تجمع ملفات الإنتاج والتوضيح المصغرة

الترخيص

حقوق الطبع والنشر (ج) 2020 رومان لاموث ، ترخيص معهد ماساتشوستس للتكنولوجيا