撇號cms - 富文本預覽不能在管理視圖中工作

Question

在自定義內容類型（員工）中，我有一個正文字段。

在lib\modules\employees\index.js

addFields: [ 
    { 
     name: 'body', 
     label: 'Beskrivelse', 
     type: 'area', 
     options: { 
      widgets: { 
       'apostrophe-rich-text': { 
        toolbar: ['Bold', 'Italic', 'Link', 'Unlink'] 
       } 
      } 
     } 
    } 
] 

而且在lib\modules\employees-widgets\views\widget.html

{{ apos.singleton(piece, 'body', 'apostrophe-rich-text', { 
    toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ] 
    }) 
}} 

編輯直接在頁面上顯示了工具欄和預覽豐富的文本字段。但在管理視圖中，工具欄顯示，但預覽根本不起作用。看看波紋管鏈接的圖像：

It looks like this when editing on the page

It looks like this in the admin view

Answer 1

撇號的管理模式CSS復位，因此在模態富文本區域不反映項目層面的風格。這是爲了防止項目級別樣式干擾重要的撇號UI。

您可以隨時將這些管理範圍添加到您的項目級別CSS，只需注意其範圍即可。

Answer 2

如果有人應該有同樣的問題，斯圖亞特的答案是正確的（當然）。以下是我在lib\modules\apostrophe-assets\public\css\site.less中添加的內容，以使其適用於我。您可能需要添加更多選項或適應口味:)

.apos-ui { 
    .apos-rich-text { 
     h1 { 
      font-size: 2em; 
     } 
     h2 { 
      font-size: 1.6em; 
     } 
     h3 { 
      font-size: 1.3em; 
     } 
     h1, 
     h2, 
     h3 { 
      margin: 1em 0; 
      font-weight: bold; 
     } 
     p { 
      margin-bottom: 1em; 
     } 
     a { 
      color: darkblue; 
     } 

     strong, 
     b { 
      font-weight: bold; 
     } 
     i, 
     em { 
      font-style: italic; 
     } 
    } 
}