VueJSでdjango-cmsを使用してフロントエンドの編集を破棄しました

django-cmsとVueJSを使用してサンプルアプリケーションを作成しようとしました。VueJSでdjango-cmsを使用してフロントエンドの編集を破棄しました

<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以外のテンプレートを指定するので、それらを解析してその内容を削除します。なぜ「ダブルクリック編集」機能がなくなったのですか？

私はVue.config.ignoredElementsに含まれるのは、VUEの後に残るCMS-プラグインのdivはHTMLを処理していることを確認<cms-template>タグでジャンゴ-CMSのプラグインをラップし、このための簡単なパッチを書いてきました。

あなたはここにパッチを見つけることができます。 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

VueJSでdjango-cmsを使用してフロントエンドの編集を破棄しました

答えて

関連する問題