search

motla / vue-document-editor

:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps
https://motla.github.io/vue-document-editor/
MIT License
313 stars 70 forks source link

New page auto create in Vue2 version #18

Closed elvishuges closed 2 years ago

elvishuges commented 2 years ago

The function to create new page, in Vue 2 dont work.

When im writing a text and in overflow the a4 page size. the editor dont create a new page automatcaly.

motla commented 2 years ago

Hi! Thanks for reporting. Please provide an example or a github repo so I can test your code and find the bug.

elvishuges commented 2 years ago

can you send me a codepen using vue2 version and runnning the vue-document-editor ?

motla commented 2 years ago

Come on man, you can do it 🙂 You just have to take the static code example in the README.md file:

<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>

Just copy and paste it.

motla commented 2 years ago

For Vue2:

<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>
elvishuges commented 2 years ago

yes. the code you shared works. but take a look when i use in my project. the text overflow and the new page is not generated: image

motla commented 2 years ago

I can't deduce anything from a screenshot... I'm not a god (yet)! Again please provide an example or a github repo so I can test your code and find the bug. It's the only way I can help you.

elvishuges commented 2 years ago

Hello, Motla. i created a project using vue2 version and installed your vue-document-editor. Please download and install this project and see how the vue-document editor behaves. 1 There is a black line around the editor. 2 please , check the used scss and sass version and tell me if it is ok 3 the editor star with text centered. 4 the editor behaves very diferent whe compared to the live version.

repo link: https://github.com/elvishuges/exe-vue-document-editor

motla commented 2 years ago

I think you didn't pushed your latest code to your repo, because I can't see vue-document-editor. I did npm install then npm run serve it takes me to the Vue2 "hello world" new project default page.

elvishuges commented 2 years ago

Sorry. try again please. i updated the repo. Sorry again

motla commented 2 years ago

Hello! Thanks for your report. Apparently it had to do with CSS scoping. I just released v1.3.0 for Vue2 and v2.1.0 for Vue3 which should correct your problem. Please let me know this if you still have issues.

1738736002 commented 1 year ago

I ran into the same problem with vue.2.7.14, where the previous page exceeded the part hidden behind the next page.

github：https://github.com/1738736002/vue2-demo Corresponding to page 7 after the project started.

I have another question, why does my 'Hellowrod' component actually have a lot of content, but only render a page of content, and not automatically create a new page.