Developer tools · HTML WYSIWYG editor
Inline Styles vs Classes: Reading the HTML a Visual Editor Produces
· How it works
html css contenteditable
Explains how visual formatting choices become tags, inline styles or nothing at all, and how to adapt that output to a stylesheet-driven site.
The snippet looks right until it meets your stylesheet — opens with editor output that clashes with site CSS
A fragment can look correct in the source application because its style attribute wins locally, then clash with a destination theme or lose that attribute during publication. ToolAcre chooses not to carry inline presentation. Its allowlist drops style and class everywhere, leaving supported structural and semantic elements for the destination to style.
That policy makes the preview intentionally modest. A heading, list or strong phrase remains recognizable, but colors, fonts, spacing and copied design-system classes are gone. The cleaned snippet is easier to reason about, although it cannot reproduce every source appearance or function as a self-contained styled component.
Three representations exist generally; this editor keeps semantic tags and removes style and class
HTML can express meaning with elements, local presentation with style attributes, or reusable presentation with class names interpreted by a stylesheet. These mechanisms are not interchangeable. A strong element says something about importance; a red style merely selects a color; a class means only what a particular stylesheet defines.
This editor keeps a semantic subset and refuses both presentation channels. Even a harmless class is unknown to the allowlist, because the receiving site—not ToolAcre—owns class definitions. The removal report names the discarded attribute so a writer can distinguish intentional cleanup from an unexplained visual change.
Why this editor refuses inline styles instead of preserving self-contained presentation
Many editors preserve inline styles because those declarations travel with a pasted fragment without requiring an external stylesheet. ToolAcre makes the opposite trade: a style attribute is broad enough to create unpredictable rendering and URL-bearing CSS surfaces, while this drafting tool needs only structured text.
The tests include a style value containing a JavaScript-shaped URL and prove the entire style attribute disappears. That is evidence for the narrow filter, not a claim that every possible CSS payload has been independently classified. Allowlisting no style at all avoids maintaining a partial CSS sanitizer in this module.
Worked example: formats this toolbar actually offers
The toolbar offers bold, italic, two list types, clear formatting, block choices, links and unlinking. Bold and italic output normalize toward strong and em. Block choices include paragraph, h1 through h4, blockquote and pre. No color picker, font selector, alignment action or class field exists.
Apply those controls to a sample paragraph and inspect source. The useful comparison is between intended meaning and emitted elements: a quotation should become blockquote, code-like spacing can use pre, and a heading should be a heading. Do not infer support for underline, superscript or other allowlisted tags merely because source mode may retain them.
Adapting output means styling it at the destination; classes cannot be authored here
A CMS adaptation starts after export. Add destination classes in that CMS, a component template or a reviewed transformation where their definitions are known. ToolAcre cannot translate unknown inline declarations into project-specific tokens, and it cannot validate whether a class exists in your production stylesheet.
Keep semantic tags where they match the content. Removing strong or heading structure just to make every node a styled span reverses the benefit of cleanup. The destination layer should decide appearance, while the draft carries paragraphs, hierarchy, lists, quotations, code and links that remain meaningful without a theme.
Inline styles may suit other workflows, but they are not output by this tool
Inline styles can be necessary in systems that do not preserve or load a shared stylesheet, especially some email production paths. This repository, however, supplies no email compatibility processor and emits no style attribute. A writer must translate the clean draft through an email-specific, tested workflow later.
One-off embeds can have similar constraints, but that does not expand this editor’s contract. The downloaded document includes a fixed preview stylesheet authored by ToolAcre around sanitized body markup; copying the fragment does not copy that wrapper or its CSS. Inspect the exact artifact being handed to the destination.
What this does not cover — CSS specificity debugging, design tokens or automated conversion tools
This article does not debug CSS specificity, map design tokens, inline styles automatically or promise pixel parity. It also avoids saying that semantic tags force a particular screen-reader announcement or search ranking. Semantics improve structure, while actual presentation and interpretation remain dependent on the consuming environment.
The sandboxed preview is a rendered inspection surface, not a model of your live stylesheet. It is pinned to a light document theme and grants no scripts, forms or same-origin access. A clean-looking preview cannot establish that the same fragment is safe or visually correct in every publication system.
Takeaway: read the output, then decide — summarises the choice and how ToolAcre's HTML WYSIWYG editor lets you see the markup before deciding what to keep
Read the output, then decide at the destination. ToolAcre intentionally turns styled pasted material into a smaller semantic vocabulary, records removals and exposes source for review. That workflow prevents accidental inline presentation from becoming invisible technical debt while accepting that visual fidelity may decrease.
Test with representative content rather than an entire unpublished campaign. Confirm headings, lists, emphasis and links; then apply approved classes where the content will live. If pixel-identical transfer is the requirement, this tool’s no-style policy is a mismatch, not a hidden feature waiting to be enabled.