update with div fix

davidroyer · Jan 25, 2018 · 2616d31 · 2616d31
1 parent 1fc1c49
commit 2616d31
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 12 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -12,6 +12,8 @@
           v-model="editor1Content">
         </vue-editor>
         <button class="btn btn-primary" @click="saveContent(editor1Content)">Save</button>
+
+        <div v-html="content"></div>
       </div>
     </div>
   </div>
@@ -32,10 +34,10 @@ export default {
   },
   data() {
     return {
-      editor1Content: '<h1>Editor 1 Starting Content</h1>',
+      editor1Content: '<div class="wrap hero__heading_wrap"> <h1 class="hero__heading">Imagine what you can accomplish.</h1> <h2 class="subheader__title" style="color:#c8c8c8;">Discover what matters.<br> And build your life around it.</h2> <div>Content Inside Div</div> <a href="/online-degrees/#undergraduate-section" class="orange-btn">Undergraduate Degrees</a> <a href="/online-degrees/#graduate-section" class="orange-btn">Graduate Degrees</a></div>',
       editor2Content: '<h1>Editor 2 Starting Content</h1>',
       showPreview: true,
-      content: '<h1>Html For Editor</h1>',
+      content: '<div class="wrap hero__heading_wrap"> <h1 class="hero__heading">Imagine what you can accomplish.</h1> <h2 class="subheader__title" style="color:#c8c8c8;">Discover what matters.<br> And build your life around it.</h2> <div>Content Inside Div</div> <a href="/online-degrees/#undergraduate-section" class="orange-btn">Undergraduate Degrees</a> <a href="/online-degrees/#graduate-section" class="orange-btn">Graduate Degrees</a></div>',
       editor1IsDisabled: false,
       editor2IsDisabled: false,
       editorSettings: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue2-editor",
-  "version": "2.3.31",
+  "version": "2.3.32",
   "description": "HTML editor using Vue.js 2, and Quill.js, an open source editor",
   "keywords": [
     "vue",

diff --git a/src/VueEditor.vue b/src/VueEditor.vue
@@ -35,6 +35,13 @@ export default {
     }
   },
 
+  computed: {
+    filteredInitialContent() {
+      let content = this.value || ''
+      return content.replace(/(<div)/igm, '<p').replace(/<\/div>/igm, '</p>');
+    }
+  },
+
   data() {
     return {
       quill: null,
@@ -76,6 +83,8 @@ export default {
           toolbar: this.toolbar,
           markdownShortcuts: {},
           imageDrop: true
+          // 'link-tooltip': true
+          // NEED TO ADD TITLE ATTRIBUTE FOR THIS TO WORK?
         },
         placeholder: this.placeholder ? this.placeholder : '',
         theme: 'snow',
@@ -112,8 +121,28 @@ export default {
       }
     },
 
+    handleDivTags() {
+      let content = this.value
+      console.log('handleDivTags: ', content);
+      return content.replace(/(<div)/igm, '<p').replace(/<\/div>/igm, '</p>');
+
+      if (content.includes('<div')) {
+        return content.replace(/(<div)/igm, '<p').replace(/<\/div>/igm, '</p>');
+      }
+    },
+
     checkForInitialContent() {
-      this.editor.innerHTML = this.value || ''
+      this.editor.innerHTML = this.filteredInitialContent
+      // console.log('Checking for Initial content:', this.value);
+      // let content = this.value
+      //
+      // if (content.includes('<div')) {
+      //   let newContent = content.replace(/(<div)/igm, '<p').replace(/<\/div>/igm, '</p>');
+      //   console.log('Adjusted Content!', newContent);
+      //   this.editor.innerHTML = newContent
+      // } else {
+      //   this.editor.innerHTML = content || ''
+      // }
     },
 
     checkForCustomImageHandler() {

diff --git a/src/helpers/MarkdownShortcuts.js b/src/helpers/MarkdownShortcuts.js
@@ -258,6 +258,10 @@ class MarkdownShortcuts {
 
  onEnter () {
    let selection = this.quill.getSelection()
+   if (!selection) {
+     return;
+   }
+
    const [line, offset] = this.quill.getLine(selection.index)
    const text = line.domNode.textContent + ' '
    const lineStart = selection.index - offset

diff --git a/src/helpers/toolbar.js b/src/helpers/toolbar.js
@@ -1,21 +1,14 @@
 let defaultToolbar = [
   [{ 'header': [false, 1, 2, 3, 4, 5, 6, ] }],
   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-  [{ 'align': [] }],
-  // [{'align': ''}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],
+  [{'align': ''}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],
   ['blockquote', 'code-block'],
-
   [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
-
   // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
   [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-
   [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-
   ['link', 'image', 'video'],
-
   ['clean'],                                         // remove formatting button
-
   // [{ 'direction': 'rtl' }],                         // text direction
 ]
 

diff --git a/src/index.js b/src/index.js
@@ -12,5 +12,9 @@ const Vue2Editor = {
   }
 }
 
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(Vue2Editor)
+}
+
 export default Vue2Editor
 export { VueEditor, Quill }