<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">
<p>Content</p>
</textarea>
<!-- js -->
<script src="/your-article-dist-path/article-editor.min.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
css: ['/your-article-dist-path/arx-frame.min.css'],
custom: {
css: ['/path-to-bootstrap/bootstrap.min.css']
},
classes: {
img: 'img-fluid',
table: 'table table-bordered'
},
embed: {
responsive: 'embed-responsive embed-responsive-16by9'
}
});
</script>
</body>
</html>
This example shows how to connect Bootstrap CSS for Article. This is done in a few steps.
The first one. You need to connect Article styles that provide display of editing controls:
ArticleEditor('#entry', {
css: ['/your-article-dist-path/arx-frame.min.css']
});
Second. You need to connect the Bootstrap css file.
ArticleEditor('#entry', {
css: ['/your-article-dist-path/arx-frame.min.css'],
custom: {
css: ['/path-to-bootstrap/bootstrap.min.css']
}
});
You can connect a Boostrap file with attributes, like this:
css: [{ href: '/assets/css/bootstrap.min.css', crossorigin: 'anonymous' }]
And third. This is how you can connect a file with your styles:
ArticleEditor('#entry', {
css: ['/your-article-dist-path/arx-frame.min.css'],
custom: {
css: [
'/path-to-bootstrap/bootstrap.min.css',
'/path-to-my-styles/my-styles.min.css'
]
}
});
For some reason, the images in Bootstrap are not responsive by default. So in the example, we specify a predefined class for images in the settings. This does all uploaded images responsive.
classes: {
img: 'img-fluid'
}