博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react use simditor
阅读量:6819 次
发布时间:2019-06-26

本文共 1204 字,大约阅读时间需要 4 分钟。

1、install simditor

2、import simditor && scss

import $ from "jquery"import Simditor from "Simditor";import "Simditor/styles/Simditor.scss"const toolbar = ['title','bold','italic','underline','striketthrough','fontScale','color','|','ol','ul','hr',"|","link",'table'];class RichEditor extends React.Component {    constructor(props){    super(props);    }    componentDidMount() {    this.loadEditor();    }    loadEditor() {    this.textarea = this.refs['textarea'];    this.editor = new Simditor({        textarea: $(this.textarea),        placeholder: this.props.placeholder,        toolbar: toolbar,        params: {}        this.bindEditorEvent();        this.setValue(this.props.value);        if (this.props.focus) {            const first = this.editor.body.find('p,li,pre,h1~h4'...).first();            this.editor.focus();            this.editor.selection.setRangeAtStartOf(first);        }    })    }        bindEditorEvent() {    this.editor.on('valuechanged',()=>{    this.props.onValueChange(this.editor.getValue())    })    }    setValue(value) {    this.editor.setValue(value)    }        render() {    return (        

 

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/9046139.html

你可能感兴趣的文章
Understanding Recursion
查看>>
学习笔记——JavaScript 编码规范
查看>>
redux middleware 源码分析
查看>>
小程序中怎么显示html 内容
查看>>
vue-cli (vue2.5.2&webpack3.6.0) 配置文件全注释
查看>>
vue-cli发布版本时,打包问题的正确解决方案
查看>>
从线程池到synchronized关键字详解
查看>>
Android 彻底掌握Binder
查看>>
apicloud弹出层
查看>>
从入门到菜鸟的经验分享
查看>>
python疑问6:生成器,可迭代对象,迭代器区别和联系
查看>>
【299天】跃迁之路——程序员高效学习方法论探索系列(实验阶段57-2017.12.01)...
查看>>
对象的点查询和中括号查询
查看>>
一行代码搞定人脸识别
查看>>
python3进程和线程
查看>>
【quickhybrid】Android端的项目实现
查看>>
Webpack3简单入门1
查看>>
好的代码可以自己说话!
查看>>
css揭秘笔记——用户体验
查看>>
【287天】每日项目总结系列025(2017.11.19)
查看>>