react-native-cn-quill
Version:
react-native quill richtext editor
54 lines (52 loc) • 1.78 kB
JavaScript
import { create_quill, editor_css, editor_js, quill_bubble_css, quill_snow_css, quill_js, } from '../constants/editor';
export const getFontName = (font) => {
return font.toLowerCase().replace(/\s/g, '-');
};
const Inital_Args = {
initialHtml: '',
placeholder: 'write here',
toolbar: 'false',
libraries: 'local',
theme: 'snow',
editorId: 'editor-container',
containerId: 'standalone-container',
color: 'black',
backgroundColor: 'white',
placeholderColor: 'rgba(0,0,0,0.6)',
customStyles: [],
fonts: [],
customJS: '',
};
export const createHtml = (args = Inital_Args) => {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
${args.theme === 'bubble'
? quill_bubble_css(args.libraries === 'cdn')
: quill_snow_css(args.libraries === 'cdn')}
${editor_css(args.editorId, args.containerId, args.color, args.backgroundColor, args.placeholderColor, args.fonts, args.defaultFontFamily)}
${args.customStyles &&
args.customStyles
.map((style) => {
return style.toLocaleLowerCase().trim().startsWith('<style>')
? style
: `<style>${style}</style>`;
})
.join('\n')}
</head>
<body>
<div id="${args.containerId}">
<div id="${args.editorId}">
${args.initialHtml}
</div>
</div>
${quill_js(args.libraries === 'cdn')}
${create_quill(args.editorId, args.toolbar, args.placeholder, args.theme, args.fonts.map((f) => getFontName(f.name)), args.customJS ? args.customJS : '')}
${editor_js}
</body>
</html>
`;
};