fastlion-amis
Version:
一种MIS页面生成工具
107 lines (106 loc) • 4.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var tools_1 = require("../utils/shell/tools");
var wangeditor_1 = (0, tslib_1.__importDefault)(require("wangeditor"));
var RichText = /** @class */ (function (_super) {
(0, tslib_1.__extends)(RichText, _super);
function RichText() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.editorRef = react_1.default.createRef();
_this.edit = false;
_this.init = function () {
var _a = _this.props, readOnly = _a.readOnly, disabled = _a.disabled, model = _a.model, onModelChange = _a.onModelChange, placeholder = _a.placeholder, onRef = _a.onRef, onBlur = _a.onBlur, onFocus = _a.onFocus;
var controls = [];
if (tools_1.tools.isMb) {
controls = [
'undo', 'foreColor', 'bold', 'italic', 'text-align', 'image', 'fontSize', 'table',
];
}
else {
controls = [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'foreColor',
// 'backColor', // 背景颜色
'link',
'list',
'justify',
// 'quote', // 引用
// 'emoticon', // 表情
'image',
'table',
// 'video', // 插入视频
'code',
'undo',
'redo' // 重复
];
}
var editor = new wangeditor_1.default(_this.editorRef.current);
_this.editor = editor;
editor.customConfig.menus = controls;
editor.customConfig.showMenuTooltips = false; // 菜单按钮 tooltips
editor.customConfig.showFullScreen = false; // 禁用全屏按钮
editor.customConfig.zIndex = 8;
// 可使用 base64 格式保存图片
// uploadImgShowBase64（base64 格式）和 uploadImgServer（上传图片到服务器）两者不能同时使用
editor.customConfig.uploadImgShowBase64 = true;
editor.customConfig.onchange = function (html) {
onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(html);
_this.edit = true;
};
onFocus && (editor.customConfig.onfocus = onFocus);
onBlur && (editor.customConfig.onblur = function () { onBlur === null || onBlur === void 0 ? void 0 : onBlur(); _this.edit = false; });
editor.create();
// 禁用
if (disabled || readOnly)
editor.$textElem.attr('contenteditable', false);
// 值回显
editor.txt.html(model);
onRef && onRef(editor);
};
return _this;
}
;
RichText.prototype.componentDidMount = function () {
this.init();
};
RichText.prototype.componentDidUpdate = function (prevProps) {
var _a, _b, _c, _d;
var _e = this.props, model = _e.model, disabled = _e.disabled, readOnly = _e.readOnly;
if (model !== prevProps.model && !this.edit) {
(_a = this.editor) === null || _a === void 0 ? void 0 : _a.txt.html(model);
}
if (disabled !== prevProps.disabled || readOnly !== prevProps.readOnly) {
if (disabled || readOnly) {
(_b = this.editor) === null || _b === void 0 ? void 0 : _b.$textElem.attr('contenteditable', false);
}
else {
(_d = (_c = this.editor) === null || _c === void 0 ? void 0 : _c.enable) === null || _d === void 0 ? void 0 : _d.call(_c);
}
}
};
RichText.prototype.componentWillUnmount = function () {
// this.editor?.destroy()
this.editor = null;
};
RichText.prototype.render = function () {
var cls = "rich-text-editor keyDownClass";
this.props.readOnly && (cls += ' readOnly');
this.props.disabled && (cls += ' disabled');
return react_1.default.createElement("div", { className: cls, ref: this.editorRef, onTouchMove: function (e) { return e.stopPropagation(); } });
};
RichText.defaultProps = {
disabled: false,
readOnly: false
};
return RichText;
}(react_1.default.Component));
exports.default = RichText;
//# sourceMappingURL=./components/WangEditor.js.map