如何从富文本中截断？
我想截断富文本中的文本，如下所示。我尝试了很多方法，但都不起作用。
{% for piece in data.pieces %}
<div class="col-md-4 col-sm-6">
<div class="single-product mb-55 animated fadeInUp" data-animate="fadeInUp" data-delay=".1" style="animation-duration: 0.6s; animation-delay: 0.1s;">
<span class="tip">{{ piece.title }}</span>
<img src="img/products/product1@2x.jpg" data-rjs="2" alt="" data-rjs-processed="true" width="237" height="193">
<h3 class="h5">
{{ apos.area(piece, 'body') }}
</h3>
</div>
</div>
<!-- End of Single Product -->
{% endfor %}我需要截断这部分。我不知道是否有其他方式来显示描述：
{{ apos.area(piece, 'body') }}回答 1
Stack Overflow用户
发布于 2019-07-22 00:54:33
有许多不同的方法可以解决这个问题，你没有提供太多的需求，所以这些都需要巧妙地满足你的需求。
注意:针对富文本(标记)使用Nunjuck过滤器将包括代码中的所有
truncate标签和空格，而不是截断限制。下面的例子使用了Nunjuck的截断。这可能会导致您的标记中的标记损坏，如果一个标记被打开，达到限制，然后再也不会关闭。我推荐实现像truncate-html这样的东西作为项目级的Nunjucks助手。请参阅Implementing custom Nunjucks helpers in Apostrophe
为富文本小部件提供区域级截断设置
在您的作品的模式中，在定义body区域时，向apostrophe-rich-text选项添加一些标志
{
name: 'body',
label: 'Body',
type: 'area',
options: {
widgets: {
'apostrophe-rich-text': {
toolbar:[...], // toolbar settings
styles:[...], // styles settings
truncate: 250 // truncates after 250 characters
}
}
}
}然后，在apostrophe-rich-text-widgets模板的项目级覆盖中，观察要传递给富文本小部件的那些设置。使用Nunjucks内置的truncate过滤器来更改小部件中的文本内容。
在lib/modules/apostrophe-rich-text-widgets/views/widget.html中
<div data-rich-text class="apos-rich-text">
{% if data.options.truncate %}
{{ data.widget.content | safe | truncate(data.options.truncate) }}
{% else %}
{{ data.widget.content | safe }}
{% endif %}
</div>Advantage：这可以在不改变body当前数据结构的情况下与上面提供的设置一起工作。
Disadvantages：这种方法是蛮力的。您在区域级别指定了该选项，因此该区域内的所有富文本小部件都将收到这些选项，并相应地截断它们。如果您使用单例来保存描述，同样的方法会工作得更好，因为您可以严格控制截断选项发生的位置。
使用截断选项将富文本小部件包装到新小部件中
该方法包括创建一个新的小部件，该小部件包含一个富文本单例和用于控制是否截断文本以及截断多少文本的选项。我将把这个小部件命名为truncate-rich-text
在lib/modules/truncate-rich-text-widgets/index.js中(创建此文件和路径)
module.exports = {
extend: 'apostrophe-widgets',
label: 'Truncate Rich Text',
addFields: [
{
name: 'content',
label: 'Content',
type: 'singleton',
widgetType: 'apostrophe-rich-text',
options: {
toolbar:[],
styles:[]
}
},
{
name: 'truncate',
label: 'Truncate this text?',
type: 'boolean',
choices: [
{ label: 'Yes', value: true, showFields: ['truncateCharacters'] },
{ label: 'No', value: false }
]
},
{
name: 'truncateCharacters',
label: 'Character limit',
type: 'integer'
}
]
};然后在lib/modules/truncate-rich-text-widgets/views/widget.html中(创建这个)
<div class="truncate-rich-text">
{% if data.widget.truncate %}
{{ data.widget.content.items[0].content | safe | truncate(data.widget.truncateCharacters) }}
{% else %}
{{ data.widget.content.items[0].content | safe }}
{% endif %}
</div>最后，将这个新模块添加到app.js配置中。
var path = require('path');
var apos = require('apostrophe')({
shortName: 'myProject',
modules: {
// ... other modules
'truncate-rich-text-widgets': {},
}
});Advantage：它提供了对截断哪些文本小部件的更细粒度的控制，并且可以在站点中更广泛地使用。
Disadvantages：这将是站点配置中的一个新窗口小部件，这意味着您必须迁移内容才能使用它。这也降低了在Apostrophe中编辑文本的大量上下文，这是一个令人沮丧的编辑器用户体验。
正如我所说的，有多种方法可以实现这一点，而且对于不同的情况也有UX的微妙之处(也许你只向注销的用户显示截断的文本，而把完整的内容留给编辑，因为保存时你的文本一直消失会让人感到困惑)。希望这将为您找到正确的实现开辟一些途径。
https://stackoverflow.com/questions/57133114
复制相似问题
腾讯云开发者
