Using the RichEdit demo it seems the form where the component is located picks up the section of the HTML that is being edited. Here is before assigning the HTML.
Here is after assigning the HTML to RichEdit.
Is there a way to isolate the HTML in the RichEdit so it does not effect everything else?
So, also here I will need to ask sufficient details, and preferably a sample source project with which this can be reproduced.
I set HTML to the richeditor with embedded STYLE section, but I cannot see incorrect behavior.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI in Software Development</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #f5f7fa;
color: #333;
}
header {
text-align: center;
padding: 2rem 1rem;
background: #4a6cf7;
color: white;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 2rem;
max-width: 1100px;
margin: auto;
}
.panel {
background: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.2s ease;
}
.panel:hover {
transform: translateY(-5px);
}
.panel h2 {
color: #4a6cf7;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>The Power of AI in Software Development</h1>
</header>
<section class="container">
<div class="panel">
<h2>🚀 Accelerated Development</h2>
<p>
AI automates repetitive coding tasks, provides intelligent code suggestions,
and speeds up debugging. This allows developers to deliver features faster
and focus on solving higher-level problems.
</p>
</div>
<div class="panel">
<h2>🤖 Smarter Code Quality</h2>
<p>
Machine-learning-powered tools analyze patterns and detect potential issues
long before they cause failures. AI enables more reliable, cleaner code with
fewer bugs and better maintainability.
</p>
</div>
<div class="panel">
<h2>💡 Enhanced Creativity & Innovation</h2>
<p>
AI assists developers by generating ideas, suggesting architectures, and
offering alternative solutions. This expands creativity and reduces the time
needed to explore new technologies and prototypes.
</p>
</div>
</section>
</body>
</html>
Result:
Try this HTML. I do not think there is a work around other than inline all the styles.
MikeDriver.html (22.6 KB)
Run this demo. Past the HTML from the document into the Memo, switch the tab to the rich edit and press the button to assign the HTML to the rich edit.
RichEditor.zip (1.8 MB)
Use this code:
begin
WebRichEdit1.Lines.Assign(WebMemo1.Lines);
end;
as your current approach will mess up linebreaks in the HTML.
Bruno,
Although that fixes the issue, all the formatting of the HTML document is lost. I was able to work around the issue by removing the style section and placing all the styling inline. I was able to do having some control over the creation of the HTML document. So you get WYSIWYG editing with all the colors, tables, bullets and boxes intact. It turns out it is a nice simple HTML editor. The only issue I found is it strips out the html, header and body tags from the HTML so I just restore those when done editing.
As always, your support is greatly appreciated.
John
This is a limitation of how the underlying content editable DIV that is used for this HTML editor works in the browser.
Browsers treat elements like:
<html><head><body>as special structural nodes that can only exist at the top level of the document.
They cannot be children of a <div>, whether it’s editable or not.
So when you do:
editableDiv.innerHTML = "<html><body><h1>Hello</h1></body></html>";
the browser sanitizes it into:
<h1>Hello</h1>
The high-level structural tags (html, head, body) are simply ignored.
This is a browser level implementation that we cannot workaround.