使用 django-cms 与 VueJS 打破了前端编辑

Question

我尝试使用 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 包装会破坏这个，如果可能的话，我该如何解决。

Answer 1

发生这种情况是因为 django-cms 在结构模式下使用 <template> 标签将其插件包装到 .cms-plugin div 中。这将双击编辑 link 添加到实际插件中。

由于 Vue 使用 <template> 标签指定 javascript 之外的模板，它会解析它们并删除它们的内容。这就是 "double click to edit" 功能消失的原因。

我为此写了一个简单的补丁，将 django-cms 插件包装在 <cms-template> 标签中，当包含在 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);
  }
});

希望对您有所帮助。

干杯！

恐龙.

使用 django-cms 与 VueJS 打破了前端编辑

Use django-cms with VueJS broke the front-end editing

javascript

django

vue.js

vuejs2

django-cms