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 系统中添加本身的工做流引擎。