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中。这会添加双击以编辑实际插件的链接。

由于Vue使用<template>标记来指定javascript之外的模板，因此它会解析它们并删除其内容。这就是为什么＆＃34;双击编辑＆＃34;功能消失了。

我已经为此编写了一个简单的补丁程序，它将<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);
  }
});

希望这有帮助。

干杯！

恐龙。

使用带有VueJS的django-cms打破了前端编辑

1 个答案: