vue document editor

Vue-Document-Editorは、vue.jsの上に構築されたリッチテキストエディターであり、ネイティブのコンテンツブラウザーの実装と、ペーパーサイズのページにコンテンツを広めるためのJavaScriptの策略を使用しています。主に、HTMLまたはインタラクティブなテンプレートを使用して、ターゲットを絞った変更を事前にフォーマットしたドキュメントにできるように設計されています。

このパッケージは、適切なドキュメントエディターを完全な機能に置き換えるつもりはありません。強力なワードプロセッサをお探しの場合は、vue.jsまたはCollabora Online Development EditionのCkeditorをご覧ください。

特徴

ライブデモを参照してください

• 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を読みます。

既知の問題 /制限

• 元に戻す / redo ：分割メカニズムがすべての入力でHTMLコンテンツを変更するため、ネイティブの元に戻す /やり直す必要があるため、ナビゲーターが失われます。 content更新を見てスタックに保存してから復元することで、自分で実装する必要があります。 demo.vueはこれを実装します。また、編集可能なフィールドがcontentと同期されていない場合は、インタラクティブなテンプレートにカスタム元を元に戻す/やり直す必要があります。
• パフォーマンス：今のところ、大きなテキストは複数の段落に分割する必要があり、大きなページ番号はドキュメント全体を遅くすることができます（問題14を参照）。
• Safari Print ：Safariは、印刷ボックスにボーダレスペーパー形式を選択しない限り、印刷マージンを追加します。これは手動で行う必要があります。この問題の回避策はまだないと思います。
• 表、画像：画像/テーブルの配置とサイジングは含まれていません。あなたはあなたのニーズのために特別にそれを実装することができます。ただし、テーブルの行は複数のページで正常に分割されます。
• ページの分割はVUEページテンプレートでは機能しません。このライブラリは、VUEが管理するコンテンツ（.vueページテンプレートなど）で動作することはできません。唯一の選択肢は、.Vueテンプレートを使用する代わりに、コンテンツにプレーンHTMLを作成することです。属性を使用してHTML要素を使用してインタラクティブ性を行うことができますcontenteditable="false"およびonclick="..."独自のJavaScriptコードを含む。

プロジェクト開発

• npm run serveコンパイル、サーブ、ホットレロードの開発のためのデモ
• npm run buildコンパイルと制作ファイルとデモを模倣します

ライセンス

Copyright（c）2020 Romain Lamothe、MITライセンス