Odoo 網頁編輯器中的snippet (拖拽插件)

你們好，

咱們在odoo 編程的時候，經常遇到，須要自定義 snippets 的狀況。也就是，原生的拖拽模板不夠用，須要咱們本身添加一些拖拽模板。

這裏，咱們就主要說說，如何經過一些簡單的方法，添加自定義拖拽模板。

首先，咱們來講說咱們但願達到的效果：就是但願能夠經過拖拽添加以下 References 界面。

<u>步驟一：</u>

與全部新建模塊的步驟同樣，首先須要建立一個新的模塊並正確地配置 manifest.py 並將添加 website 成爲 manifest.py 的依賴。

# The website module has to be installed and is needed to add a building block
depends': ['website'],

<u>步驟二：</u>

咱們須要在 views 文件夾下面，建立一個xml 文件，並將其命名爲 snippets.xml。這個文件夾下，咱們就會添加咱們的核心構建代碼，用來構建咱們的網頁編輯器模塊。

<u>步驟三：</u>

咱們須要經過xml 文件，來構建咱們的拖拽展現模板。咱們將全部的拖拽文件及內容都編寫進入 div 容器內。這樣一來，咱們能夠應用大量的 bootstrap類。 <!-- 這條記錄，會建立基礎構建塊及其佈局 --> <template id="s_title_references" name="References with title"> <section class="s_references bg-gray-lighter"> <div class="container"> <div class="row"> <h3> <center>Our references</center> </h3> </div> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive " alt="Demo Logo 1"/> </div> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive " alt="Demo Logo 2"/> </div> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive " alt="Demo Logo 3"/> </div> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive " alt="Demo Logo 4"/> </div> <!-- 你能夠經過調用本身的模塊並寫上到圖片地址來調用相關資源--> <div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16"> <img src="/website_snippet_demo/static/src/image/website.s_reference_demo_image_6" class="img img-responsive " alt="Demo Logo 6"/> </div> --> </div> </div> </section> </template>

<u>步驟四：</u> 讓咱們在咱們的編輯器上添加預覽視圖，這樣咱們就能夠很方便地找到咱們但願看到的模板。 如何作呢？

最簡單的方式是，繼承website.snippets 記錄，並在xpath 中添加 ‘snippet_structure’的id，這裏將是咱們編輯器的核心代碼。

<!-- 這條記錄，會建立一個預覽視圖於構建視圖左側目錄上，您能夠在那裏選擇您須要的樣式 -->
<template id="add_title_references_to_bar" inherit_id="website.snippets" name="Place into building blocks bar">
    <xpath expr="//div[@id='snippet_structure']" position="inside">
        <div class="o_panel_body">
            <t t-snippet="website_snippet_demo.s_title_references"
               t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
        </div>
    </xpath>
</template>

這裏，須要說明一下，咱們的機制是經過繼承原生的’website.snippets’ 記錄來保存全部含有snippets 的連接。而後，咱們經過給 ‘snippet_structure’ 添加xpath 的方式，讓odoo知道，咱們但願在odoo 中添加一個新的snippet 預覽。最後，將manifest.py 文件，保存至系統中。

# always loaded
'data': [
    # Load the snippets (building block code) when installing
    'views/snippets.xml',
]

<u>步驟五： </u> 安裝咋們剛設計的snippet 工具，而後進行測試。

謝謝！

咱們將在接下來的文章中，講到如何在odoo 系統中添加本身的工做流引擎。