Inline Text Field Formatting

An inline field that allows some simple inline formatting (bold, italic, ...)

Strapi Plugin Text Field Formatting by PROPAGANDE

A Strapi plugin that adds a custom field for inline text formatting. This plugin provides a simpler alternative to the full WYSIWYG editor, offering only inline formatting options.

Features

Bold - Make text bold
Italic - Italicize text
Underline - Underline text
Strikethrough - Strike through text
Inline Code - Format text as code
Hyperlinks - Add links to text

Configuration Options

For each field, you can configure:

Output Format: Choose between HTML or Markdown storage
Allowed Formats: Select which formatting options are available (bold, italic, underline, strikethrough, code, links)

Installation

npm install @propagande/strapi-plugin-text-field-formatting
# or
yarn add @propagande/strapi-plugin-text-field-formatting
# or
bun add @propagande/strapi-plugin-text-field-formatting

Then, add the plugin to your Strapi configuration in config/plugins.js (or config/plugins.ts):

module.exports = {
  // ...
  'propagande-text-field-formatting': {
    enabled: true,
  },
};

Usage

Go to Content-Type Builder in your Strapi admin panel
Select an existing content type or create a new one
Click Add another field
In the custom fields section, select Inline Text Formatter
Configure your field:
- Choose the output format (HTML or Markdown)
- Select which formatting options to allow
Save your content type
Use the field in your content editor with the formatting toolbar

Output Formats

HTML Output

When configured for HTML output, the field stores formatted text as HTML:

This is <strong>bold</strong> and <em>italic</em> text with a
<a href="https://example.com">link</a>.

Markdown Output

When configured for Markdown output, the field stores formatted text as Markdown:

This is **bold** and _italic_ text with a [link](https://example.com).

Development

# Install dependencies
npm install

# Build the plugin
npm run build

# Watch for changes
npm run watch

# Type checking
npm run test:ts:front
npm run test:ts:back