vue document editor下載 - vue document editor源代碼下載

vue document editor

其他資源

v2.3.2 (Vue3)

下載

Vue-Document-編輯器是一位富文本編輯器，使用本機滿足瀏覽器實現和一些JavaScript Triptery構建在Vue.js之上，並在紙張大小的頁面上傳播內容。它的設計主要旨在允許使用HTML或Interactive模板進行預定的文檔進行靶向修改。

此軟件包無意用完整功能替換正確的文檔編輯器。如果您正在尋找功能強大的文字處理器，請查看ckeditor vue.js或concomplora在線開發版。

特徵

參見現場演示

將vue.js組件用作交互式頁面模板
單詞劃分的頁面拆分（仍然實驗 - 僅適用於普通的HTML內容）
本地打印兼容
毫米的動態文檔格式和邊距
自定義頁面疊加層（標題，頁腳，頁碼）
頁面中斷
智能變焦和頁面顯示模式
計算插入位置的文本樣式
遷移到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文件和與實時演示相對應的voiceTemplate.ce.vue文件。

API

對於道具，數據和样式變量的列表：讀取API 。

已知問題 /限制

撤消 /重做：隨著拆分機制修改每個輸入時的HTML內容，因此需要重寫本機撤消 /重做，因此導航器會丟失。您必須通過觀看content更新並將其存儲在堆棧中，然後恢復它們來自己實現。演示實現了這一點。同樣，如果您的交互式模板與content沒有同步，則需要進行自定義的撤消/重做管理。
性能：目前，必須將大文本分為多個段落，並且大型頁碼可以減慢整個文檔（請參閱第14期）。
Safari打印：Safari添加了印刷保證金，除非您在打印框中選擇無邊界的紙張格式。必須手動完成。我想此問題還沒有解決方法。
表，圖像：不包括圖像/表格位置和尺寸。您可以專門為您的需求實施。但是，表行分為多個頁面。
頁面分配不適用於VUE頁面模板：此庫無法對由VUE管理的內容作用（例如.VUE頁面模板），因為丟失了Vue，並且模板頁面不再是交互式。您唯一的選擇是在內容中編寫普通的HTML，而不是使用.VUE模板。您可以通過使用屬性contenteditable="false"和onclick="..."包含您自己的JavaScript代碼的屬性=“ false” =“ false”和ontribute進行交互。