B1: Add Css: admin#/appearance >> Custom Styles
.CommentPost {
& .has-dropcap:first-letter {
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
float: left;
font-size: 6rem;
line-height: 0.65;
margin: 0.1em 0.1em 0.2em 0;
}
& .Post-body {
& img {
border-radius: var(--border-radius);
max-width: 100%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
/*vertical-align: middle;*/
border-style: none;
-webkit-object-fit: cover;
object-fit: cover;
}
& .img-left {
float: left;
/*min-width: 250px;*/
max-width: 40%;
margin-right: 30px;
margin-bottom: 0px;
padding: 0px 0px 20px;
}
& .img-right {
float: right;
/*min-width: 250px;*/
max-width: 40%;
margin-left: 30px;
margin-bottom: 0px;
padding: 0px 0px 20px;
}
}
}
B2: Add code in file extend.php
/**
* Add BBCodes Content
*/
use s9e\TextFormatter\Configurator;
return [
/**
* Add BBCodes Content
*/
(new Extend\Formatter)
->configure(function (Configurator $config) {
$config->BBCodes->addCustom(
'[right]{TEXT}[/right]',
'<div align="right">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[left]{TEXT}[/left]',
'<div align="left">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[justify]{TEXT}[/justify]',
'<div align="justify">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[center]{TEXT}[/center]',
'<div align="center">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[pleft]{TEXT}[/pleft]',
'<div style="padding-left: 40px;">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[pright]{TEXT}[/pright]',
'<div style="padding-right: 40px;">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[dropcap]{TEXT}[/dropcap]',
'<div class="has-dropcap">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[img-left]{TEXT}[/img-left]',
'<div class="img-left">{TEXT}</div>'
);
$config->BBCodes->addCustom(
'[img-right]{TEXT}[/img-right]',
'<div class="img-right">{TEXT}</div>'
);
}),
];
Thanks for your help: @luceos and @clarkwinkelmann
Demo Test: https://flarum.khatvongsong.vn/d/63-add-bbcodes-content-left-center-right-justify-dropcap
