使用django-cms與VueJS打破了前端編輯

我嘗試使用django-cms和VueJS創建示例應用程序。使用django-cms與VueJS打破了前端編輯

<body> 
    {% cms_toolbar %} 
    <div class="container"> 
     <div id="vue-wrapper"> 
      <div class="content"> 
       {% block content %}{% endblock content %} 
      </div> 
     </div> 
    </div> 
    {% render_block "js" %} 
    <script src="https://unpkg.com/vue"></script> 
    <script> 
     const app = new Vue({ 
      el: '#vue-wrapper', 
      mounted:() => { 
       console.log("mounted") 
      }, 
     }) 
    </script> 
</body>

這個簡單的代碼打破了前端編輯。

如果我刪除vue-wrapper元素，註釋js代碼或在封裝我的內容之前關閉該元素，則前端編輯工作。

我不明白爲什麼用Vue包裝打破了這一點，如果可能的話，我該如何解決。

來源

2017-06-05 Varkal

不知道這是否會有所幫助，但是不要使用'=>'功能，因爲掛載時只需使用'mounted：function（）{}'，因爲這會導致作用域'this' –

我知道，但是我並沒有在函數的主體中使用這個，所以不是問題。並沒有解決問題... 但是，謝謝你！ – Varkal

發生這種情況是因爲在結構模式下，django-cms使用<template>標籤將其插件封裝到.cms-plugin div中。這增加了雙擊編輯鏈接到實際的插件。

由於Vue使用<template>標籤來指定javascript以外的模板，因此它解析它們並移除它們的內容。這就是爲什麼「雙擊編輯」功能消失了。

我已經爲此編寫了一個簡單的補丁，它包裹了<cms-template>中的django-cms插件，當它包含在Vue.config.ignoredElements中時，確保cms-plugin div在vue處理完html後保留。

您可以在這裏找到補丁： https://gist.github.com/dinoperovic/a719f0c43a2614f434a309b64a64e18f

只需加載腳本，並在你的JS做到這一點：

// app.js 

// Set ignored elements as required by vue-djangocms-patch. 
Vue.config.ignoredElements = ['cms-template', 'cms-plugin']; 

// Main Vue instance. 
var app = new Vue({ 
    el: '#app', 
    created: function() { 
    new VueDjangoCMSPatch(this); 
    } 
});

希望這有助於。

乾杯！

迪諾。

來源

2018-01-16 14:28:45 DinoXProduction

使用django-cms與VueJS打破了前端編輯

回答

相關問題