vue document editor

Vue-Document-Editor -это богатый текстовый редактор, построенный на вершине vue.js, используя нативную реализацию браузера довольного и некоторую хитрость JavaScript для распределения контента по страницам размером с бумаги. В основном он предназначен для того, чтобы позволить целевым модификациям в предварительно форматированных документах с использованием HTML или интерактивных шаблонов .

Этот пакет не намерен заменить правильный редактор документов на полную функциональность. Если вы ищете мощный текстовый процессор, посетите Ckeditor для Vue.js или Collabora Online Development Edition.

Функции

Смотрите живую демонстрацию

• Используйте компоненты 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 и файл vinsticetemplate.ce.vue, соответствующий демо -версии в прямом эфире.

API

Для списка реквизитов, данных и переменных стиля: прочитайте API .

Известные проблемы / ограничения

• Undo / redo : Native Undo / Redo необходимо переписать, поскольку механизм разделения модифицирует содержание HTML на каждом входе, поэтому навигатор теряется. Вы должны реализовать его самостоятельно, просмотрев обновления content и сохраняя их в стеке, а затем восстановив их. Демо. Вес реализует это. Также ваши интерактивные шаблоны должны иметь пользовательское управление отменой/реду, если их редактируемые поля не синхронизированы с content .
• Производительность : На данный момент большие тексты должны быть разделены на несколько абзацев, и большие номера страниц могут замедлить весь документ (см. Выпуск 14).
• Safari Print : Safari добавляет маржу печати, если вы не выберете безграничный бумажный формат в коробке печати. Это должно быть сделано вручную. Я думаю, что для этой проблемы пока нет обходного пути.
• Таблицы, изображения : изображение/размещение таблицы и размеры не включены. Вы можете реализовать это специально для ваших потребностей. Тем не менее, табличные ряды прекрасно разделяются на нескольких страницах.
• Разделение страниц не работает с шаблонами страниц Vue : эта библиотека не может действовать в соответствии с контентом, управляемым Vue (например, шаблоны страниц. Единственный выбор, который у вас есть, - это писать простой HTML в контенте вместо использования шаблонов .vue. Вы можете выполнять интерактивность, используя HTML -элементы с атрибутами contenteditable="false" и onclick="..." содержащим ваш собственный код JavaScript.

Разработка проекта

• npm run serve Композиты, подают и горячую нагрузку для разработки
• npm run build сборки и миниаки производственных файлов и демонстрации

Лицензирование

Copyright (C) 2020 Romain Lamothe, MIT Лицензия