Using the rich text editor (images, code blocks, etc.)

✍️ Using the Rich Text Editor (Images, Code Blocks, etc.)

The BlueDocs rich text editor is a powerful tool for creating well-structured, professional documents. Whether you're writing SOPs, policies, training content, or technical guides, the editor allows you to combine text, lists, code, tables, and media to create clean, accessible documents that are easy to read and share.

This guide walks you through the editor’s capabilities, from basic formatting to advanced features like tables and syntax-highlighted code blocks.

📝 Basic Text Formatting

The rich text editor offers familiar formatting tools to help you create clean, readable content.

Text styling:

Bold text can be applied using the toolbar or Ctrl + B
Italic text with the toolbar or Ctrl + I
Use the paragraph button to reset any heading or styled text back to normal

Headings:
BlueDocs supports three levels of headings, which help structure your document:

Heading 1 – Use for top-level sections
Heading 2 – Use for subsections
Heading 3 – Use for detailed subpoints under subsections

These headings create hierarchy and improve navigation within long documents.

Lists:
You can organize information using:

Bullet lists for unordered content
Numbered lists for sequences or procedures

Blockquotes:
Use the quote button to highlight citations, testimonials, or important text. Blockquotes are styled for emphasis and separation.

🖼️ Adding Images

Images help break up text and illustrate key ideas.

To insert an image:

Click the Image button in the toolbar
Paste the image URL in the dialog box
Click Insert

Images are auto-resized to fit the document layout. Note: currently, BlueDocs only supports images via publicly accessible URLs. Direct file uploads are not yet supported.

📊 Using Tables

Tables are useful for displaying structured content like comparisons, checklists, or schedules.

To insert a table:

Click the Table icon in the toolbar to add a 3x3 table with a header row

Once the table is added, you can:

Add or remove rows and columns
Resize columns to fit your content
Style the header row with bold text and background shading

These options appear when you click inside a table, and the table toolbar becomes active.

💻 Adding Code Blocks with Syntax Highlighting

For technical documentation, the editor includes support for syntax-highlighted code blocks. You can write or paste code in multiple programming languages, with formatting applied automatically.

Supported languages include:

JavaScript
HTML
CSS
Python
SQL
JSON
Bash

To insert a code block:

Click the Code button in the toolbar
Select your language from the dropdown
Paste or type your code

Code blocks are styled with a dark theme, monospace font, and horizontal scrolling for long lines.

💡 Editor Tips and Best Practices

Paragraph control:

Enter creates a new paragraph
Shift + Enter creates a line break within the same paragraph
When editing a table or code block, pressing Enter outside the element will continue your content flow

Content structuring:

Use consistent headings to define document sections
Break up long paragraphs with lists, images, or subheadings
Use tables to present data clearly
Insert code blocks for technical or developer-facing content

Professional formatting tips:

Don’t skip heading levels — go from H1 to H2 to H3
Keep lists concise and consistent
Resize or optimize images to prevent layout issues
Apply syntax highlighting to make code easier to read

♿ Accessibility Features

The BlueDocs editor includes built-in accessibility support:

Fully keyboard-navigable
Semantic HTML output for screen readers
High-contrast syntax highlighting
Consistent heading structures for assistive technologies

🛠 Troubleshooting Common Issues

Problem	Solution
Image not displaying	Make sure the image URL is public and correct
Table not formatting	Click inside the table cell to activate table controls
Code not highlighting	Check that the correct language is selected
Changes not saving	Wait a moment — the editor auto-saves with a short delay

🚀 Performance Tips

Optimize large images to reduce page load time
Break extremely long documents into smaller ones
Limit overly complex tables with dozens of rows or columns

These steps help keep editing smooth and responsive for all users.

🆘 Need Help?

If you're running into formatting issues:

Review the supported content types in this guide
Refresh the page if the editor becomes unresponsive
Contact your admin for advanced formatting needs
Use in-app support channels to report technical issues

💡 Pro Tip: The editor automatically saves your work in real time — so you can focus on content creation without worrying about manual saves.


With its rich formatting options, syntax support, and seamless usability, the BlueDocs editor empowers your team to create documentation that’s not just informative — but beautifully structured and easy to read.

Updated on: 27/05/2025