2019-03-18 18:50:50 wowlusitong 阅读数 576
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57536 人正在学习 去看看 李宁

re-editor

一个开箱即用的React富文本编辑器 ?当然也可以定制化啦?

编辑器默认工具栏使用了ant,如果想换个风格,可以自定义工具栏

屏幕快照 2019-03-17 23 11 49

特点

  • 开箱即用,无需配置
  • 定制化,可自行开发任意风格和形式的工具条 [API补全中]
  • 支持元素功能设置,例如修改图片大小

使用方法

re-editor有两种使用方法,提供开箱即用的方式,也可以进行深度的定制化

开箱即用

安装依赖

$ npm install re-editor

引入样式

在js里面引入

import 're-editor/lib/styles/index.css'

也可以在css里面引入(需要css预处理支持)

@import 're-editor/lib/styles/index.css'

props

属性 说明 类型
value 编辑器的值 object
onChange 编辑器更改内容的回调 (value: Value) => void
placeholder 占位文本 string

自定义

编辑器分为两个部分,内容编辑区域工具条,大部分的自定义需求都是集中在工具条上

安装编辑器核心

$ npm install @re-editor/core

创建工具条

可以用任何方式创建编辑器工具条,需要将编辑器的实例传给工具条,可参考 re-editor@re-editor/toolbar-antd的实现,详情查看API文档(这部分文档还没写完,会在一周内补全?)

例如实现一个加粗功能:

import { command } from '@re-editor/core';

const Demo = (props) => {
  function handleClick() {
    command(props.editor)('bold')
  }
  return <div onClick={handleClick}>bold</div>
}

packages介绍

  • re-editor: 一个封装好的,包含工具条的编辑器
  • @re-editor/core: 编辑器核心
  • @re-editor/toolbar-antd: 基于antd制作的工具条,默认
  • @re-editor/examples: 演示项目

FAQ

和slate或draft-js对比有什么区别?

slate或draft并不是一个纯编辑器,它们更像是一个用于构建编辑器的框架,re-editor是基于slate开发,让你不必关注构建编辑器的过程。

怎么修改样式

样式分为两部分,node(粗体、h1、h2等)和工具栏,它们都可以通过css重写基础样式,工具栏也可以做到完全重写
样式可以通过css自定义

每次保存数据量太大怎么办?

使用增量更新,onChange回调的value是 immutable格式,可以使用immutable-js-diff等方法获取diff的内容进行增量更新

2019-03-12 10:54:14 mnhn456 阅读数 944
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57536 人正在学习 去看看 李宁

一,背景

     近几天工作比较轻松吧,打算把之前没有完成的博客后台管理系统的发布博客功能实现,这就需要一个基于react的markdown编辑器

    之前的博客实现是使用vue实现的,后台管理想使用react,对于vue的markdown编辑器还是非常多而且健全的,但基于react的markdown编辑器,,说实话,少而功能不全,找了很多,也试了很多,总体来讲体验不好。不过,最后还是找到了——

braft-editor。

效果图:

二,介绍(文档

安装和使用

安装

使用npm或者yarn来将本编辑器加入到你的项目中:

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

注意:对于传统的scrpt标签引入方式,本项目暂未进行充分测试

使用

 

编辑器支持valueonChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:

import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {

    state = {
        // 创建一个空的editorState作为初始值
        editorState: BraftEditor.createEditorState(null)
    }

    async componentDidMount () {
        // 假设此处从服务端获取html格式的编辑器内容
        const htmlContent = await fetchEditorContent()
        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
        this.setState({
            editorState: BraftEditor.createEditorState(htmlContent)
        })
    }

    submitContent = async () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前,可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML()
        const result = await saveEditorContent(htmlContent)
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    render () {

        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )

    }

}

当然本编辑器也支持defaultValue属性,因此你也可以将本编辑器作为一个非受控组件来使用。


编辑器的内容格式

对于上文提到的valuedefaultValue属性,均需要传入一个editorState对象,这一点类似于Ant Design中的日期选择器组件,它使用moment对象作为数据格式。

关于editorState的具体介绍,请参见:https://draftjs.org/docs/api-reference-editor-state.html 。

在实际项目中,editorState对象无法用于展示也无法用于持久化存储,需要将其转换为html字符串来进行展示,用于持久化时则建议转换成raw格式

raw格式是一种可以用于无损持久化的数据格式,形式上是一段JSON,因此可以用字符串形式存储,推荐使用这种格式来用于数据持久化。下面是一段raw格式的数据示例:

{
  "blocks": [{
    "key": "9hu83",
    "text": "Hello World!",
    "type": "unstyled",
    "depth": 0,
    "inlineStyleRanges": [{
      "offset": 6,
      "length": 5,
      "style": "BOLD"
    },
    {
      "offset": 6,
      "length": 5,
      "style": "COLOR-F32784"
    }],
    "entityRanges": [],
    "data": {}
  }],
  "entityMap": {}
}

 

虽然html字符串也可以用于持久化存储,但是对于比较复杂的富文本内容,在反复编辑的过程中,可能会存在格式丢失的情况,比较标准的做法是在数据库中同时存储raw字符串html字符串,分别用于再次编辑和前台展示。

 

可以使用BraftEditor.createEditorState方法来将raw或者html格式的数据转换成editorState数据:

// 引入EditorState
import BraftEditor from 'braft-editor'

// 将raw格式的数据转换成editorState
const rawString = `{"blocks":[{"key":"9hu83","text":"Hello World!","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":6,"length":5,"style":"BOLD"},{"offset":6,"length":5,"style":"COLOR-F32784"}],"entityRanges":[],"data":{}}],"entityMap":{}}`
const editorState = BraftEditor.createEditorState(rawString)

// 将html字符串转换成editorState
const htmlString = `<p>Hello <b>World!</b></p>`
const editorState2 = BraftEditor.createEditorState(htmlString)

 

BraftEditor.createEditorState方法内部做了诸多适配处理,你可以直接传入raw字符串、raw JSON和html字符串,只要传入的内容有效,都能获得对应的editorState数据。

 

将editorState数据转换成raw或者html则更方便:

// 将editorState数据转换成RAW字符串
const rawString = editorState.toRAW()

// editorState.toRAW()方法接收一个布尔值参数,用于决定是否返回RAW JSON对象,默认是false
const rawJSON = editorState.toRAW(true)

// 将editorState数据转换成html字符串
const htmlString = editorState.toHTML()

 

美化输出内容

编辑器输出的HTML字符串仅包含文本内联样式和少量的布局样式,例如图片的左右浮动等。对于引语块(blockquote)、代码块(code block)等内容,一般情况下需要自行美化。

从v2.2.7开始,编辑器新增了一个css样板文件用于进行输出内容的基本美化功能,能够尽量做到输出内容的展示效果接近编辑器编辑时的效果。使用方法如下:

// 在展示页面引入css样板文件
import 'braft-editor/dist/output.css'
// 给用于展示HTML内容的容器加上特定的className
<div className="braft-output-content" dangerouslySetInnerHTML={{__html: outputContent}}></div>

 

注意事项

因为编辑器的选区状态(包括所选内容和光标位置等),都是包含在editorState对象中的,如果将editorState转换成html,再将html转换成editorState,得到的是一个新的editorState,它不包含之前的选区状态,所以类似于下面的这种写法是错误的!除了会导致光标回跳,更可能会导致无限onChange!

// 错误示范!
<BraftEditor
  value={BraftEditor.createEditorState(this.state.value)}
  onChange={(editorState) => this.setState({ value: editorState.toHTML() })}
>

   三,总结

      总体来说,使用还是比较简单的,不管怎么说,这个算是我近期遇到的react 富文本中的最合心意的了,当然坑还是有的,有什么建议,欢迎一起讨论。

 

2019-08-19 17:08:10 qq_23941963 阅读数 58
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57536 人正在学习 去看看 李宁

首先安装两个插件
在这里插入图片描述
使用的代码如下

import React from 'react'
import {Button,Card,Modal} from 'antd'
import {Editor} from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftjs from 'draftjs-to-html'

export default class RichText extends React.Component{

state = {
    showRichText:false,
    editortContent: "",
    editorState: "",
};

handleClearContent = ()=>{
    this.setState({
        editorState:''
    })
}

handleGetText = ()=>{
    this.setState({
        showRichText:true
    })
}

onEditorChange = (editortContent) => {
    this.setState({
        editortContent,
    });
};

onEditorStateChange = (editorState) => {
    this.setState({
        editorState
    });
};

render(){
  console.log(this.state)
  let { editorState,editortContent } = this.state;

    return (
        <div>
            <Card style={{marginTop:10}}>
                <Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
                <Button type="primary" onClick={this.handleGetText}>获取HTML文本</Button>
            </Card>
            <Card title="富文本编辑器">
                <Editor
                    editorState={editorState}
                    onContentStateChange={this.onEditorChange}
                    onEditorStateChange={this.onEditorStateChange}
                />
            </Card>
            <Modal
                title="富文本"
                visible={this.state.showRichText}
                onCancel={()=>{
                    this.setState({
                        showRichText:false
                    })
                }}
                footer={null}
            >
                {draftjs(this.state.editortContent)}
            </Modal>
        </div>
    );
}

}

在这里插入图片描述

2018-09-19 18:33:01 genius_yym 阅读数 5815
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57536 人正在学习 去看看 李宁

1.摘要

本博客主要总结 react 富文本编辑器 react-draft-wysiwyg 的使用,包括相关依赖、保存方式以及回显方式。


2.效果图

在这里插入图片描述


3.安装相关依赖

npm install react-draft-wysiwyg
npm install draft-js
npm install draftjs-to-html
npm install html-to-draftjs


4.引入相关组件函数

import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

5.使用,相当于一个组件

<Editor
  editorState={this.state.editorState}
  wrapperClassName="demo-wrapper"
  editorClassName="demo-editor"
  onEditorStateChange={::this.onEditorStateChange}
/>
{/* css
.demo-editor {
   height: 380px !important;
   border: 1px solid #F1F1F1 !important;
   padding: 5px !important;
   border-radius: 2px !important;
}
*/}

6.以富文本的方式保存,即以HTML格式的方式保存发送到后台

formSubmit() {
  // 转换成HTML格式
  var editorContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
  this.props.saveSys({roomnotes: editorContent})
}

7.回显,即保存后下次回来重新查看之前所编辑的数据以及格式。


componentWillReceiveProps(nextProps) {
  if (this.props.getSysResult!==nextProps.getSysResult && nextProps.getSysResult.data) {
    // 匹配富文本编辑器格式,回显保存的内容
    const contentBlock = htmlToDraft(nextProps.getSysResult.data.roomnotes);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      this.setState({ editorState })
    }
  }
}

8.相关

点击访问官方文档:https://jpuri.github.io/react-draft-wysiwyg/#/docs

完整的demo点击这里访问我的GitHub

2019-01-17 19:58:50 qq_37506861 阅读数 520
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57536 人正在学习 去看看 李宁

概述

在项目开发经常会用到markdown编辑器,来实现丰富的文档操作,今天来说一下react-mde的使用方法

地址

先说一下常用的react-mde: gitHub地址

常用版本

react-mde ^5.8.0
react-mde ^6.0.0
ps: ^6.0.0版本是本博客在写作时候的更新到的最新版本,与之前的5.8.0版本相比差别还是很大的

如何使用

  • 安装包
    npm install react-mde showdown draft-js --save
    
  • 作用
    react-mde就是所需要的markdown编辑器
    showdown是一个将markdown转换位html的工具
以下介绍5.8.0版本的使用
npm install react-mde@5.8.0 --save
  • 引入js文件,一般是在index.html文件里面,(放在head标签内部)
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  • 引入css文件,一般在项目的入口文件处导入
    import 'react-mde/lib/styles/css/react-mde-all.css';
import React from 'react';
import ReactMde, { ReactMdeTypes } from 'react-mde';
import * as Showdown from 'showdown';
class Markdown extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			mdeState: {
 			    markdown: '*这是一段markdown*'
 			}
 		}
 		this.converter = new Showdown.Converter({
	      tables: true,
	      simplifiedAutoLink: true,
	      strikethrough: true,
	      tasklists: true,
	    });
 	}
 	render() {
 		return (
 			<ReactMde
				layout="horizontal"
				editorState={this.state.mdeState}
			    generateMarkdownPreview={markdown =>
			    	Promise.resolve(this.converter.makeHtml(markdown))
			    }
			    onChange={(mdeState: ReactMdeTypes.MdeState) => {
			    	this.setState({ mdeState });
			    }}
			/>
 		)
 	}
}

以上就是react-mde ^5.8.0版本的全部使用方法了
ps: 至于6.0.0版本的gitHub上面写的非常清楚,请参考上述gitHub地址

PS:以下是我的个人博客小站,欢迎关注哦
戳我戳我

没有更多推荐了,返回首页