Class 如何在撇号CMS中的刷新之间将持久样式应用于富文本小部件

我是一个撇号的初学者，我正在努力让我的头脑围绕一些概念，同时也熟悉撇号可以做什么

目前，我正在建立一个营销页面。我有一个富文本小部件singleton，定义如下：

{{ apos.singleton(data.page, 'introBlurb', 'apostrophe-rich-text', {
            toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink' ],
            styles: [
            { name: 'H1', element: 'h1' },
            { name: 'H2', element: 'h2' },
            { name: 'H3', element: 'h3' },
            { name: 'H4', element: 'h4' },
            { name: 'P', element: 'p'},
            { name: 'H1 Center', element: 'h1', styles: {'text-align': 'center'} },
            { name: 'H2 Center', element: 'h2', styles: {'text-align': 'center'} },
            { name: 'H3 Center', element: 'h3', styles: {'text-align': 'center'} },
            { name: 'H4 Center', element: 'h4', styles: {'text-align': 'center'} },
            { name: 'P Center', element: 'p', styles: {'text-align': 'center'} },
            { name: 'H1 Right', element: 'h1', styles: {'text-align': 'right'} },
            { name: 'H2 Right', element: 'h2', styles: {'text-align': 'right'} },
            { name: 'H3 Right', element: 'h3', styles: {'text-align': 'right'} },
            { name: 'H4 Right', element: 'h4', styles: {'text-align': 'right'} },
            { name: 'P Right', element: 'p', styles: {'text-align': 'right'} }
            ]
            }) }}

CKEditor在编辑器下拉列表中正确显示所有可用的文本样式，并且我输入的文本应用了正确的文本对齐。例如，在选择H1 Right时键入，会将文本推到输入框的右侧，这是应该的

但是，刷新后（确保保存后），文本将恢复为左对齐样式。我尝试了以下方法：

• 将其中一个元素中的“styles”对象替换为“attributes:{'class'：'textAlignRight'}”
• 将“！important”附加到我上面列出的文本对齐样式
• 从我的主“site.less”文件中删除所有文本对齐CSS
• 在lib/modules/撇号富文本和lib/modules/撇号富文本窗口小部件的index.js文件中重新配置sanitizeHtml …以及上述任何和所有组合

以上大部分内容都是从

由于我无法确定这一点，我已求助于简单地将类应用于包含可编辑部分的s，而不是控制文本对齐。当然，这是没有必要的，因为我更愿意给我的网站管理员一种方式来调整他们自己的文本，如果他们决定它看起来更好的中心，而不是左或右，或者你有什么

---

如果有人有任何建议或能为我指出正确的方向，我将不胜感激

为了防止网页或应用程序的复制和粘贴破坏站点的布局，撇号过滤为富文本小部件提交的标记

您可以调整该过滤，以允许您希望允许的内容，而不允许垃圾邮件通过

要做到这一点，请查看，特别是有关如何为项目配置

清理html

的内容

你可以写：

// in your project level lib/modules/apostrophe-rich-text-widgets/index.js file
module.exports = {
  sanitizeHtml: {
    allowedAttributes: {
      'h1': [ 'style' ]
      // etc. for other tags allowing this
    }
  }
};

但这将允许粘贴随机CSS。更好的方法是为您想要的文本对齐类型定义CSS类，如

center

，然后使用sanitize html的

allowedClasses

功能：

allowedClasses: {
  h1: [ 'center' ]
}

---

这样，您就可以更好地控制用户在您的网站上粘贴内容时发生的情况。

Tom，谢谢您的快速回复。不幸的是，这对我来说不太管用。我有没有办法告诉撇号导入/使用撇号富文本widgets/index.js文件？我不关心用户的复制和粘贴，这将是一个无需输入的网页，只是用来显示信息。Tom是对的，但你也必须改变你的样式对象。例如：

{name:'H1 Center'，element:'H1'，style:{'text-align'：'Center'}}，

到

{name:'H1 Center'，element:'H1'，属性：{style:'text-align:Center'}，

。这就是说，像

.u-center

这样的实用程序类可能会更干净。“我有没有办法告诉撇号导入/使用撇号富文本widgets/index.js文件？”您导入它的目的是什么？@alexbea，我为“导入”index.js文件的混淆术语道歉，我只是想问，除了创建自己的包含index.js文件的撇号富文本小部件目录之外，是否还有其他步骤可以让项目识别index.js文件。我已经用更正的“H1 Center”对象（以及创建的Tom的index.js文件）复制了您的代码，但仍然存在问题-键入的文本正确显示，在可编辑部分居中，但刷新后恢复为左对齐。您将文件放在何处？