1.0.4 • Published 8 months ago
@quangsang97/editor-box v1.0.4
Editor Box
Installation and usage
the easiest way to use @quangsang97/editor-box is to install it from npm and build it into your app with Webpack
yarn add @quangsang97/editor-box
With webpack configuration
const { CKEditorTranslationsPlugin } = require('@ckeditor/ckeditor5-dev-translations');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
module.exports = {
...
plugins: [
...<your plugins>
new CKEditorTranslationsPlugin({
language: 'vi',
addMainLanguageTranslationsToAllAssets: true,
})
],
module: {
rules: [
...
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
]
}
...
}
With react component
import React from 'react';
import { EditorBox } from '@quangsang97/editor-box';
class App extends React.Component {
render() {
return (
<EditorBox height='500px' />
);
}
}
HtmlView
import React from 'react';
import { HtmlView } from '@quangsang97/editor-box';
class App extends React.Component {
render() {
return (
<HtmlView content='<p>Hello</p>' />
);
}
}
To make your own stylesheet of HtmlView, please see: @quangsang97/editor-box/dist/styles.scss