vue document editor

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进行交互。

项目开发

• npm run serve汇编，服务和热线充电演示进行开发
• npm run build编译并减少生产文件和演示

许可

版权（C）2020 Romain Lamothe，麻省理工学院许可证