blocks|key|68995|text|有许多不同的方法可以解决这个问题，你没有提供太多的需求，所以这些都需要巧妙地满足你的需求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|68996|68997|注意:针对富文本(标记)使用Nunjuck过滤器将包括代码中的所有truncate标签和空格，而不是截断限制。下面的例子使用了Nunjuck的截断。这可能会导致您的标记中的标记损坏，如果一个标记被打开，达到限制，然后再也不会关闭。我推荐实现像truncate-html这样的东西作为项目级的Nunjucks助手。请参阅Implementing+custom+Nunjucks+helpers+in+Apostrophe|blockquote|offset|length|style|CODE|68998|68999|69000|为富文本小部件提供区域级截断设置|69001|在您的作品的模式中，在定义body区域时，向apostrophe-rich-text选项添加一些标志|69002|++++{
++++++name:+'body',
++++++label:+'Body',
++++++type:+'area',
++++++options:+{
++++++++widgets:+{
++++++++++'apostrophe-rich-text':+{
++++++++++++toolbar:[...],+//+toolbar+settings
++++++++++++styles:[...],+//+styles+settings
++++++++++++truncate:+250+//+truncates+after+250+characters
++++++++++}
++++++++}
++++++}
++++}|code-block|syntax|javascript|69003|然后，在apostrophe-rich-text-widgets模板的项目级覆盖中，观察要传递给富文本小部件的那些设置。使用Nunjucks内置的truncate过滤器来更改小部件中的文本内容。|69004|在lib/modules/apostrophe-rich-text-widgets/views/widget.html中|69005|<div+data-rich-text+class="apos-rich-text">
++{%25+if+data.options.truncate+%25}
++++{{+data.widget.content+%7C+safe+%7C+truncate(data.options.truncate)+}}++
++{%25+else+%25}
++++{{+data.widget.content+%7C+safe+}}++
++{%25+endif+%25}
</div>|69006|Advantage：这可以在不改变body当前数据结构的情况下与上面提供的设置一起工作。|BOLD|69007|Disadvantages：这种方法是蛮力的。您在区域级别指定了该选项，因此该区域内的所有富文本小部件都将收到这些选项，并相应地截断它们。如果您使用单例来保存描述，同样的方法会工作得更好，因为您可以严格控制截断选项发生的位置。|69008|使用截断选项将富文本小部件包装到新小部件中|69009|该方法包括创建一个新的小部件，该小部件包含一个富文本单例和用于控制是否截断文本以及截断多少文本的选项。我将把这个小部件命名为truncate-rich-text|69010|在lib/modules/truncate-rich-text-widgets/index.js中(创建此文件和路径)|69011|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'
++++}
++]++++++++
};|69012|然后在lib/modules/truncate-rich-text-widgets/views/widget.html中(创建这个)|69013|<div+class="truncate-rich-text">
++{%25+if+data.widget.truncate+%25}
++++{{+data.widget.content.items[0].content+%7C+safe+%7C+truncate(data.widget.truncateCharacters)+}}
++{%25+else+%25}
++++{{+data.widget.content.items[0].content+%7C+safe+}}
++{%25+endif+%25}
</div>|69014|最后，将这个新模块添加到app.js配置中。|69015|var+path+=+require('path');
var+apos+=+require('apostrophe')({
++shortName:+'myProject',
++modules:+{
++++//+...+other+modules
++++'truncate-rich-text-widgets':+{},
++}
});|69016|Advantage：它提供了对截断哪些文本小部件的更细粒度的控制，并且可以在站点中更广泛地使用。|69017|Disadvantages：这将是站点配置中的一个新窗口小部件，这意味着您必须迁移内容才能使用它。这也降低了在Apostrophe中编辑文本的大量上下文，这是一个令人沮丧的编辑器用户体验。|69018|正如我所说的，有多种方法可以实现这一点，而且对于不同的情况也有UX的微妙之处(也许你只向注销的用户显示截断的文本，而把完整的内容留给编辑，因为保存时你的文本一直消失会让人感到困惑)。希望这将为您找到正确的实现开辟一些途径。|69019|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/truncate-html|1|https://docs.apostrophecms.org/apostrophe/tutorials/howtos/migration#adding-nunjucks-helpers-got-easier-and-better^0|0|0|X|8|3D|D|0|4F|1E|1|0|0|0|0|D|4|M|K|0|0|4|S|21|8|0|1|1M|0|0|0|9|H|4|0|0|D|0|0|1Q|I|0|1|1B|0|0|3|1K|0|0|C|6|0|0|0|9|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|21|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|23|8|@$F|24|G|25|H|I]]|9|@$F|26|G|27|1|28]|$F|29|G|2A|1|2B]]|A|$]]|$1|J|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|2E|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|2F|8|@$F|2G|G|2H|H|I]|$F|2I|G|2J|H|I]]|9|@]|A|$]]|$1|P|3|Q|5|R|7|2K|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|2L|8|@$F|2M|G|2N|H|I]|$F|2O|G|2P|H|I]]|9|@]|A|$]]|$1|W|3|X|5|6|7|2Q|8|@$F|2R|G|2S|H|I]]|9|@]|A|$]]|$1|Y|3|Z|5|R|7|2T|8|@]|9|@]|A|$S|T]]|$1|10|3|11|5|6|7|2U|8|@$F|2V|G|2W|H|12]|$F|2X|G|2Y|H|I]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2Z|8|@$F|30|G|31|H|12]]|9|@]|A|$]]|$1|15|3|16|5|6|7|32|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|33|8|@$F|34|G|35|H|I]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|36|8|@$F|37|G|38|H|I]]|9|@]|A|$]]|$1|1B|3|1C|5|R|7|39|8|@]|9|@]|A|$S|T]]|$1|1D|3|1E|5|6|7|3A|8|@$F|3B|G|3C|H|I]]|9|@]|A|$]]|$1|1F|3|1G|5|R|7|3D|8|@]|9|@]|A|$S|T]]|$1|1H|3|1I|5|6|7|3E|8|@$F|3F|G|3G|H|I]]|9|@]|A|$]]|$1|1J|3|1K|5|R|7|3H|8|@]|9|@]|A|$S|T]]|$1|1L|3|1M|5|6|7|3I|8|@$F|3J|G|3K|H|12]]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|3L|8|@$F|3M|G|3N|H|12]]|9|@]|A|$]]|$1|1P|3|1Q|5|6|7|3O|8|@]|9|@]|A|$]]|$1|1R|3|-4|5|6|7|3P|8|@]|9|@]|A|$]]]|1S|$1T|$5|1U|1V|1W|A|$1X|1Y]]|1Z|$5|1U|1V|1W|A|$1X|20]]]]

<p>There are a number of different ways you could solve this, you don't provide much in terms of requirements so these would need to finessed to meet your needs.</p>

<blockquote>
  <p>Note: Using Nunjuck's <code>truncate</code> filter against rich-text (markup)
  will include all HTML tags and spaces in code against the truncate
  limit. The examples below use Nunjuck's truncate. This could lead to broken tags in your markup, should a tag be opened, the limit be reached, and then never closed. I would recommend implementing something like <a href="https://www.npmjs.com/package/truncate-html" rel="nofollow noreferrer">truncate-html</a> as a project-level Nunjucks helper. See <a href="https://docs.apostrophecms.org/apostrophe/tutorials/howtos/migration#adding-nunjucks-helpers-got-easier-and-better" rel="nofollow noreferrer">Implementing custom Nunjucks helpers in Apostrophe</a></p>
</blockquote>

<h2>Provide area-level truncate settings for your rich-text-widgets</h2>

<p>In the schema for your piece, when defining the <code>body</code> area, add some flag to your <code>apostrophe-rich-text</code> options</p>

<pre><code>    {
      name: 'body',
      label: 'Body',
      type: 'area',
      options: {
        widgets: {
          'apostrophe-rich-text': {
            toolbar:[...], // toolbar settings
            styles:[...], // styles settings
            truncate: 250 // truncates after 250 characters
          }
        }
      }
    }
</code></pre>

<p>Then, at a project level override of the <code>apostrophe-rich-text-widgets</code> template, watch for those settings to be passed to the rich-text widget. Use Nunjucks built-in <code>truncate</code> filter to alter the text content in the widget.</p>

<p>In <code>lib/modules/apostrophe-rich-text-widgets/views/widget.html</code></p>

<pre><code>&lt;div data-rich-text class="apos-rich-text"&gt;
  {% if data.options.truncate %}
    {{ data.widget.content | safe | truncate(data.options.truncate) }}  
  {% else %}
    {{ data.widget.content | safe }}  
  {% endif %}
&lt;/div&gt;
</code></pre>

<p><strong>Advantages</strong>: This would work with the setup you've provided above without altering your current data structure of <code>body</code>.</p>

<p><strong>Disadvantages</strong>: This method is brute-force. Your specifying this option at the area level, so all rich-text-widgets within this area will receive the options and they will <em>all</em> be truncated accordingly. This same method would work better if you were using a singleton to save your description because you could tightly control where the truncate options happen.</p>

<h2>Wrap your rich-text widgets into new widgets with truncate options</h2>

<p>This method involves creating a new widget that contains a rich-text singleton and options for controlling if and how much text to truncate. I'm going to call the widget <code>truncate-rich-text</code></p>

<p>In <code>lib/modules/truncate-rich-text-widgets/index.js</code> (create this file and path)</p>

<pre><code>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'
    }
  ]        
};
</code></pre>

<p>Then in <code>lib/modules/truncate-rich-text-widgets/views/widget.html</code> (create this)</p>

<pre><code>&lt;div class="truncate-rich-text"&gt;
  {% if data.widget.truncate %}
    {{ data.widget.content.items[0].content | safe | truncate(data.widget.truncateCharacters) }}
  {% else %}
    {{ data.widget.content.items[0].content | safe }}
  {% endif %}
&lt;/div&gt;
</code></pre>

<p>Finally, add this new module to your <code>app.js</code> configuration. </p>

<pre><code>var path = require('path');
var apos = require('apostrophe')({
  shortName: 'myProject',
  modules: {
    // ... other modules
    'truncate-rich-text-widgets': {},
  }
});
</code></pre>

<p><strong>Advantages</strong>: This provides more fine-grained control over what text widgets get truncated and can be used more widely across your site.</p>

<p><strong>Disadvantages</strong>: This would be a new widget in your site configuration, which means you'd have to migrate your content to use it. This also takes a lot of the in-context'ness of editing text in Apostrophe out of the editor user experience, which is a bummer.</p>

<p>Like I said, there are multiple ways to achieve this, and there are also UX subtleties to different situations (maybe you only show truncated text to logged-out users while leaving the full content in for editors because it would be confusing for your text to keep disappearing on save). Hopefully this will open up a few pathways for you to find the right implementation.</p>


<p>I want to truncate a text from rich text as below. I tried many things, but they did not work.</p>

<pre><code>                    {% for piece in data.pieces %}

                        &lt;div class="col-md-4 col-sm-6"&gt;
                            &lt;div class="single-product mb-55 animated fadeInUp" data-animate="fadeInUp" data-delay=".1" style="animation-duration: 0.6s; animation-delay: 0.1s;"&gt;
                                &lt;span class="tip"&gt;{{ piece.title }}&lt;/span&gt;
                                &lt;img src="img/products/product1@2x.jpg" data-rjs="2" alt="" data-rjs-processed="true" width="237" height="193"&gt;

                                &lt;h3 class="h5"&gt;
                                   {{ apos.area(piece, 'body') }}
                                &lt;/h3&gt;

                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;!-- End of Single Product --&gt;
                    {% endfor %}
</code></pre>

<p>I need to truncate this part. I don't know if there is other way to display the description:</p>

<pre><code>{{ apos.area(piece, 'body') }}
</code></pre>


How to truncate from rich text?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想截断富文本中的文本，如下所示。我尝试了很多方法，但都不起作用。                    {% for piece in data.pieces %}                        <div class="col-md-4 col-sm-6">                      ...

如何从富文本中截断？-腾讯云开发者社区-腾讯云

问如何从富文本中截断？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从富文本中截断？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从富文本中截断？
EN