Redactor can be run inside an iframe. In this case you can have the content isolated from the current page styles and it allows you to edit the HTML frontend frameworks as is.
<!-- element -->
<textarea id="entry">...</textarea>
<!-- call -->
<script>
let app = Redactor('#entry', {
context: true,
classname: 'content',
css: '/your-dist-path/',
custom: {
css: ['https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'],
js: ['https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js']
},
classes: {
tags: {
img: 'img-fluid',
table: 'table table-bordered'
}
},
embed: {
responsive: 'embed-responsive embed-responsive-16by9'
},
layout: {
grid: 'row',
column: 'col'
},
layouts: {
set: true,
'one-column': {
title: 'One column',
grid: 'row',
pattern: 'col'
},
'two-columns': {
title: 'Two columns',
grid: 'row',
pattern: 'col|col'
},
'three-columns': {
title: 'Three columns',
grid: 'row',
pattern: 'col|col|col'
},
'four-columns': {
title: 'Four columns',
grid: 'row',
pattern: 'col|col|col|col'
}
}
});
</script>