最近项目中需要使用到富文本编辑器,项目是一个 Meteor with react 项目,所以就准备采用simditor,但是官方文档很少,也没有给出后台配置说明。我现在不解的是,怎么储存数据?怎么使用储存的数据进行展示?他是怎么保存编辑时候的格式的?还有图片的插入问题。望大神指点,给出思路。第一次用接触富文本编辑器
代码片段供参考:
componentDidMount() {
var textbox = ReactDOM.findDOMNode(this.refs.textarea);
this.editor = new Simditor({
textarea: $(textbox),
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color',
'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'indent', 'outdent', 'alignment', 'hr']
});
this.editor.on("valuechanged", (e, src) => {
this.props.fields.body.onChange(this.editor.getValue());
});
}
componentDidUpdate (prevProps) {
if (prevProps.body !== this.props.body) {
this.editor.setValue(this.props.body);
}
}
<textarea className="form-control" ref='textarea' rows="50" {...body}/>
我现在尝试使用material-ui,顺便也找到了一个Simditor的封装模块material-ui-html-field
富文本编辑器一般是让你可以用可视化的方式编辑 HTML ,无论哪种编辑器都是隐藏默认的 Textarea ,然后通过插入各种标签(如工具栏,渲染结果)显示一个格式化好的内容给你看。而 React 有生命周期,要显示富文本编辑器的话,要在 React 把 DOM 初始化好才能插入操作。
那么,回到实际操作的问题,先用 React 绑定一个 Property 到 Textarea 上,最后在 componentDidMount
方法中将 Simditor 绑定到对应的 Textarea 。