sccoreui
Version:
ui-sccore
96 lines (95 loc) • 4.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("froala-editor/css/froala_editor.pkgd.min.css");
require("froala-editor/css/froala_style.min.css");
const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wysiwyg"));
require("froala-editor/js/plugins.pkgd.min.js");
const FroalaEditorTextBox = (props) => {
const editorRef = (0, react_1.useRef)(null);
const { onChange, value, placeholderText, id, className, toolbar = false, froalaRef = editorRef, } = props;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `text-editor ${className}`, id: id }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
events: {
initialized: toolbar
? function () {
// this is the editor instance.
this.toolbar.hide();
}
: null,
},
fontFamilySelection: true,
fontFamily: {
"Arial,Helvetica,sans-serif": "sans-serif",
"Impact,Charcoal,sans-serif": "RobotoBold",
"RobotoItalic,Charcoal,sans-serif": "RobotoItalic",
// 'Tahoma,Geneva,sans-serif': 'Font 3'
},
fontFamilyDefaultSelection: "sans-serif",
placeholderText: placeholderText,
key: "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==",
toolbarSticky: false,
quickInsertEnabled: false,
toolbarInline: false,
attribution: false,
heightMax: 160,
heightMin: 70,
toolbarButtons: {
fontFamily: {
buttons: ["fontFamily"],
class: "customCard",
},
moreText: {
buttons: [
"bold",
"italic",
"underline",
"strikeThrough",
"fontSize",
"subscript",
"superscript",
"textColor",
"backgroundColor",
"inlineClass",
"inlineStyle",
"clearFormatting",
],
buttonsVisible: 2,
},
moreParagraph: {
buttons: [
"formatOL",
"formatUL",
"alignLeft",
"alignCenter",
"formatOLSimple",
"alignRight",
"alignJustify",
"paragraphFormat",
"paragraphStyle",
"lineHeight",
"outdent",
"indent",
"quote",
],
buttonsVisible: 2,
},
moreRich: {
buttons: [
"insertLink",
"insertImage",
"insertHR",
"undo",
"redo",
"html",
],
buttonsVisible: 2,
},
fullscreen: {
button: "fullscreen",
},
},
}, model: value, onModelChange: onChange, ref: froalaRef }) })));
};
exports.default = FroalaEditorTextBox;