将字段添加到撇号-richt-text

Question

我想让apostrophe-rich-text-widgets 可配置，允许设置文本列的数量。 （然后这个数字将转换为一个 CSS 类，这是微不足道的部分。）

如何正确addFields 到富文本小部件？下面将显示编辑富文本按钮，但是当我点击它时，什么也没有发生。

// my-app/lib/modules/apostrophe-rich-text-widgets/index.js
const _ = require('lodash');

module.exports = {
    beforeConstruct: function(self,options) {

        //options.contextualOnly = !_.isUndefined(options.contextualOnly) ? options.contextualOnly : false;
        options.contextualOnly = false;

        options.addFields = [
            {
                name: 'nr_columns',
                type: 'integer',
                min: 1,
                max: 3,
                label: 'Number of Columns'
            }
        ].concat(options.addFields || []);
    }
};

更新

所以我实现了一个包装器小部件，它允许我将列数配置为整数，并将apostrophe-rich-text 小部件添加为单例。

// lib/modules/my-wrapper/index.js
module.exports = {                                                
    extend: 'apostrophe-widgets',                                 
    label: 'Multi-column Text',                                   
    skipInitialModal: true,                                     
    addFields: [                                                  
        {                                                         
            name: 'nr_columns',                                   
            label: 'Nr. of Columns',                              
            type: 'integer',                                      
            required: true,                                       
            min: 1,                                               
            max: 3                                                
        },                                                        
        {                                                         
            name: 'text',                                         
            label: 'Text',                                        
            type: 'singleton',                                    
            widgetType: 'apostrophe-rich-text',                   
            contextual: true                                      
        }                                                         
    ]                                                             
};

当我将包装小部件添加到页面时，看不到富文本编辑器。 views/widget.html 需要什么才能完成这项工作？

更新 2

这是我的views/widget.html，但我完全不确定里面应该有什么。 （编辑：将下面的 widget.content 替换为 data.widget.content - 仍然是同样的问题。）

{% set n = data.widget.nr_columns %}

<div data-rich-text class="apos-rich-text text-row {% if n == 2 %}two-column{% endif %}">
    {{ data.widget.content }}
</div>

更新 3

我的views/widget.html：

<div class="text-row {% if n == 2 %}two-column{% elif n == 3%}three-column{% endif %}">
    {{ apos.singleton(data.widget, 'text', 'apostrophe-rich-text', {toolbar:['Bold','Italic'],contextualOnly:true}) }}
</div>

我的index.js：

module.exports = {
    extend: 'apostrophe-widgets',
    label: 'Multi-column Text',
    //skipInitialModal: true,
    addFields: [
        {
            name: 'nr_columns',
            label: 'Nr. of Columns',
            type: 'integer',
            required: true,
            min: 1,
            max: 3
        },
        {
            name: 'text',
            contextualOnly: true,
            type: 'singleton',
            widgetType: 'apostrophe-rich-text'
        }
    ]
};

将小部件添加到页面后我看到的内容：

Answer 1

为了获得与 Apostrophe 的普通 apostrophe-rich-text 小部件相同的效果，您实际上需要将该单例添加到小部件的模板中，例如

<div class="some-wrapper">
   {{ apos.singleton(data.widget, 'RICH_TEXT_WIDGET_SCHEMA_NAME', 'apostrophe-rich-text', {...RICHTEXT_OPTIONS_HERE}) }}
</div>