Tips for formatting text within a post using Apostrophe CMS

I recently followed your recommended guide on utilizing reusable content with pieces, available at:

Below is the definition for a biography:

{
    name: 'body',
    label: 'Biography',
    type: 'area',
    options: {
        widgets: {
            'apostrophe-rich-text': {
                controls: ['Bold', 'Italic', 'Link', 'Unlink']
            },
            'apostrophe-images': { }
        }
    }
}

Despite following these steps, I am unable to style the biography text either in the modal dialog or on the people-page. The toolbar for text styling seems to be missing.

Your assistance in this matter would be greatly appreciated. Thank you!

Answer №1

There is a mistake in the guide - the controls property should actually be named toolbar

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

Thank you for pointing that out, I will update the documentation!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to effectively implement @apply in a React component leveraging css modules

Within the global stylesheet, I have defined the following: :root { --font: { font-family: "Source Sans Pro", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } Then in the style.css f ...

Here is a unique rewrite of the text: "Learn the process of toggling the tabindex for

Is there a way to dynamically change the tabindex of an element based on its visibility in the viewport? I am looking to either reset the current tabindex when entering a new section and assign new values to elements within that section, or disable and re- ...

Having trouble with basic HTML/CSS functionality not functioning properly

It appears that the stylesheet is correctly linked, but it seems like there might be an issue with the HTML/CSS code. I haven't worked on HTML/CSS in a while, so I could be missing something obvious. Can you help figure out what's wrong? ...

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

Designs within Flash Builder Mobile Project

In Adobe Flash Builder, I am trying to find the equivalent of CSS in HTML. I am aware that Adobe Flash Builder Mobile projects use Flex and ActionScript for coding. My goal is to apply a consistent style to all of the buttons on my page. In CSS, I would ...

css styles for URLs that are sensitive to letter case

I'm currently at a loss for solutions as I can't seem to pinpoint the reason behind this peculiar behavior. I'm using Orchard CMS 1.4 along with a customized superfish stylesheet. Interestingly, the behavior varies depending on how the site ...

CSS :before makes an appearance followed by :after

I'm having an issue with displaying a box and background on the screen. The box is set to position fixed, along with the background. Even though the z-index values are configured correctly, the background always covers the box. What could be causing t ...

Arranging Bootstrap form text and input fields into a two-column layout

I'm currently exploring Bootstrap version 2.3.2 and I'm attempting to create a form layout using div elements... Here is the code I have created so far: <form class="form-horizontal"> <fieldset> <div class="row-fluid ...

JavaScript tutorial: Strategies for loading specific sections of a webpage initially

Many native apps, such as those on iOS, include a welcome page to keep users entertained while the app is loading. Currently, I am working on a Ruby on Rails web application (yes, it's a website!) I would like to incorporate a welcoming page into my ...

Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

My goal is to customize a bootstrap 5 thumbnails carousel by placing the thumbnails either on the top or the left side of the slides section. The default setting is at the bottom, but I need these two variations. The base model works perfectly, but I' ...

What is the method to retrieve text from a div element with Webdriver-IO?

Is there a way to extract the value from the following HTML element using Webdriver-IO for automated testing? <div class="metric-value ng-binding" ng-style="{'font-size': vis.params.fontSize+'pt'}" style="font-size: 60 ...

Sliding the content in React

My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing th ...

Creating a dynamic dropdown menu: a step-by-step guide

<ul class="nav navbar-nav friend-label"> <li class="dropdown" ng-repeat="module in modules"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> {{module.ModuleName}} < ...

Utilize a fresh font style and replace the font family components in @mui/material with the new

Looking to bring in a fresh font family stored in a fonts directory and replace the existing mui base font family. import { responsiveFontSizes, createTheme } from '@mui/material'; import NEWFONTFAMILLY from '../fonts/something.otf' c ...

Is there a way to use the same background image for both the left and right borders?

How can I set this image as both the left and right background image on my webpage? I want it to be displayed on both sides. Any suggestions on how to achieve this? Here is the code snippet I have implemented so far: <%@ Page Language="C#" AutoEventW ...

Does a CSS selector exist that targets every single element on a webpage?

Knowing about the asterisk as a wildcard in CSS is not new to me. My query is: Is there a CSS selector that targets every single element on a web page, including html, body, and all descendants? I have made attempts like: * { color: green; /*I used ...

After applying CSS, I am unable to click on the radio buttons

Even after selecting the other two, it still defaults to the first one. Here is my code: input[type=radio] { display:none; } input[type=radio] + label:before { content: ""; display: inline-block; ...

Difficulty encountered while using CSS to customize a vue template

I'm currently working on a login page and experiencing difficulty styling Vue templates using CSS. Here is the code that works without Vue: HTML <body class="text-center"> <form class="form-signin"> <h1 class="h3 mb-3 fon ...

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Whenever I try to select an option in my select box, a dotted rectangle appears. How do I remove this feature? https://i.sstatic.net/BzsL2.png I have noticed that many others are also facing the same issue. I tried updating my CSS with some properties ba ...