在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:for-editor-herb开源软件地址:https://gitee.com/HerbertHe/for-editor-herb开源软件介绍:for-editor-herb
版本说明版本号说明
基于for-editor的分支,因为原作者太久没有更新了,PR也没有处理,有些小伙伴看修改文档觉得没有很方便,索性就开了这个项目。拥抱开源,如果你喜欢,请给个star给原项目
更多的特性
文档安装# npmnpm install for-editor-herb -S# yarnyarn add for-editor-herb 使用import React, { Component } from 'react'import ReactDOM from 'react-dom'import Editor from 'for-editor-herb'// 引入代码高亮包const Hljs = require('highlight.js')class App extends Component { constructor() { super() this.state = { value: '' } } componentDidMount() { // 在componentDidMount生命周期注册你想高亮的语言 Hljs.registerLanguage('css', require('highlight.js/lib/languages/css')) Hljs.registerLanguage('json', require('highlight.js/lib/languages/json')) Hljs.registerLanguage('less', require('highlight.js/lib/languages/less')) Hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss')) Hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript')) Hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript')) Hljs.registerLanguage('go', require('highlight.js/lib/languages/go')) } handleChange(value) { this.setState({ value }) } render() { const { value } = this.state // 支持默认语言('en', 'zh-CN', 'zh-TW', 'jp'), 也支持本土化 const customLang: any = { placeholder: '开始编辑...', undo: '上一步', redo: '下一步', h1: '一级标题', h2: '二级标题', h3: '三级标题', h4: '四级标题', h5: '五级标题', h6: '六级标题', para: '段落', italic: '斜体', bold: '粗体', bolditalic: '斜粗体', delline: '删除线', underline: '下划线', keytext: '键盘文本', superscript: '上标', subscript: '下标', marktag: '高亮标签', table: '表格', quote: '引用', img: '添加图片链接', link: '链接', list: '列表', orderlist: '有序列表', disorderlist: '无序列表', checklist: '勾选框列表', inlinecode: '行内代码', code: '代码块', collapse: '折叠块', katex: 'KaTeX', save: '保存', preview: '预览', singleColumn: '单栏', doubleColumn: '双栏', fullscreenOn: '全屏编辑', fullscreenOff: '退出全屏', addImgLink: '添加图片链接', addImg: '上传图片', toc: '生成大纲' } // 传递Hljs.highlightAuto函数 return ( <Editor language={customLang} value={value} onChange={() => this.handleChange()} highlight={Hljs.highlightAuto} /> ) }}ReactDOM.render(<App />, document.getElementById('root')) API属性
/*默认工具栏按钮全部开启, 传入自定义对象 例如: { h1: true, // h1 code: true, // 代码块 preview: true, // 预览 } 此时, 仅仅显示此三个功能键 注:传入空对象则不显示工具栏*/toolbar: { h1: true, h2: true, h3: true, h4: true, h5: true, h6: true, img: true, list: true, para: { paragraph: true, // 控制整个部分是否显示 italic: true, bold: true, bolditalic: true, delline: true, underline: true, keytext: true, superscript: true, subscript: true, marktag: true }, table: true, // 表格 quote: true, // 引用 link: true, // 链接 inlinecode: true, // 行内代码 code: true, // 代码块 collapse: true, // 折叠 katex: true, // katex preview: true, // 预览 expand: true, // 全屏 undo: true, redo: true, save: true, subfield: true, // 单双栏切换 toc: true // 生成大纲插入} Localization
interface IWords { placeholder: string h1: string h2: string h3: string h4: string h5: string h6: string undo: string redo: string list: string orderlist: string disorderlist: string checklist: string para: string italic: string bold: string bolditalic: string delline: string underline: string keytext: string superscript: string subscript: string marktag: string quote: string table: string img: string link: string inlinecode: string code: string collapse: string katex: string save: string preview: string singleColumn: string doubleColumn: string fullscreenOn: string fullscreenOff: string addImgLink: string addImg: string toc: string} 事件
图片上传class App extends Component { constructor() { super() this.state = { value: '' } this.$vm = React.createRef() } handleChange(value) { this.setState({ value }) } addImg($file) { this.$vm.current.$img2Url($file.name, 'file_url') console.log($file) } render() { const { value } = this.state return ( <Editor ref={this.$vm} value={value} addImg={($file) => this.addImg($file)} onChange={(value) => this.handleChange(value)} /> ) }} 快捷键
更新日志Licensefor-editor-herb is MIT License |
请发表评论