Odoo 网页编辑器中的snippet (拖拽插件)

大家好，

我们在odoo 编程的时候，常常遇到，需要自定义 snippets 的情况。也就是，原生的拖拽模板不够用，需要我们自己添加一些拖拽模板。

这里，我们就主要说说，如何通过一些简单的方法，添加自定义拖拽模板。

首先，我们来说说我们希望达到的效果：就是希望可以通过拖拽添加如下 References 界面。

步骤一：

与所有新建模块的步骤一样，首先需要创建一个新的模块并正确地配置 manifest.py 并将添加 website 成为 manifest.py 的依赖。

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

步骤二：

我们需要在 views 文件夹下面，创建一个xml 文件，并将其命名为 snippets.xml。这个文件夹下，我们就会添加我们的核心构建代码，用来构建我们的网页编辑器模块。

步骤三：

我们需要通过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>

步骤四：
让我们在我们的编辑器上添加预览视图，这样我们就可以很方便地找到我们希望看到的模板。
如何做呢？

最简单的方式是，继承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',
]

**步骤五：
**
安装咋们刚设计的snippet 工具，然后进行测试。

谢谢！

我们将在接下来的文章中，讲到如何在odoo 系统中添加自己的工作流引擎。