富文本编辑器  React  传入

import React,{Component } from 'react';

import { Card, Button, Table, Form, Select,Modal, message } from 'antd';

import { Wrap } from './style';

// 富文本的 内容数据值

  import { EditorState } from 'draft-js';
   // 组件化标签
    import { Editor } from 'react-draft-wysiwyg';
  // 默认编辑器的css样式
    import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
  // 设置 成为 html标签
    import draftjs from 'draftjs-to-html';

export default class EditorDemo extends Component{

  state={}

  // 默认提交动作
  onEditorStateChange = (editorState) => {
    this.setState({
     editorState,
    });
  }
  // 修改提交动作
  onEditorChange: Function = (contentState) => {
    this.setState({
    contentState,
    });
  };
  // 清空文本编辑器
  handleClearContent = ()=>{
    this.setState({
    editorState:''
    })
  }
  // 获取 时时修改后的 内容值 转换为HTML
  handleGetText = ()=>{
    this.setState({
    showEditorText:true
    })
  }

render(){
  const {editorState} = this.state;
return (
<Wrap>
  <Card title="操作">
    <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.showEditorText}
  onCancel={()=>{
  this.setState({
  showEditorText:false
  })
}}
  footer={null}
>
  {draftjs(this.state.contentState)}
</Modal>
</Wrap>
);
}
}

------------------------------------------------------------------------------------------------------------------------------------------------------

富文本编辑器 拿到  HTML 进行转换

字符串转移为html代码 (编辑器写入一段带HTML格式的存入了数据库,数据库拿出来用这个转为HTML代码)

dangerouslySetInnerHTML={{__HTML:this.props.String}}

【React】富文本编辑器 清空文本内容 获取HTML的更多相关文章

  1. 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析

    使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...

  2. 现代富文本编辑器Quill的内容渲染机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. 富文本编辑器粘贴word内容

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  4. 清空KindEditor富文本编辑器里面的内容方法

    //清空KindEditorKindEditor.instances[0].html(""); 0表示第一个KindEditor编辑器对象 详情见链接:http://www.new ...

  5. php 解析富文本编辑器中的hmtl内容,富文本样式正确输出

    说明:富文本编辑器中的内容在直接获获取后需要解析以后才能在页面中正确显示 我在后端这样处理: $content = htmlspecialchars_decode($info['intro']); h ...

  6. 关于layui富文本编辑器和form表单提交的问题

    今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...

  7. 富文本编辑器和fastdfs的使用

    宜立方商城的系统架构a) 功能介绍(项目架构,有哪些功能模块,这些功能模块如何实现?)b) 架构讲解工程搭建-后台工程c) 使用maven搭建工程(后台工程如何搭建?)d) 使用maven的tomca ...

  8. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  9. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

随机推荐

  1. vue 微信内H5调起支付

    在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效. 主要代码: import axios from 'axios'; export def ...

  2. iOS Status Bar变换

    http://www.cocoachina.com/ios/20160718/17020.html 背景 iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏的需求.而改变状态栏颜色和 ...

  3. 【水滴石穿】imooc_gp

    这个项目应该是一个标杆项目,看到之前很有几个项目都是按照这个项目的页面摆放顺序来的 不过可以作为自己做项目的一种方式 源码地址为:https://github.com/pgg-pgg/imooc_gp ...

  4. DTcms设置 IIS6.0设置url重写导致editor上传全部失效

    1.修改iis的重写规则为htm 2.修改后台后缀为htm 解决

  5. oralce Sysdba和sysoper的区别

    Sysdba是一个允许读者执行任何数据库任务的全能特权.Sysoper是一个威力次之的特权,它赋予了启动和关闭能力,但限制其他管理性任务

  6. cloud-music

    非常感谢那些无私开源的程序员,希望我也能够有能力像你们那样,开源很多很有意思的东西~~ //index.html <!DOCTYPE html> <html> <head ...

  7. VS2017 打包成exe

    在项目的解决方案 右键→ 新建项目  后出现如下选择 (如果没有找到,请在联机中搜索  visual studio installer 并安装) 选择项目类型 Setup Project,并输入名称, ...

  8. Java中try catch finally语句中含return语句的执行情况总结-编程陷阱

    前言:有java编程基础的人对java的异常处理机制都会有一定了解,而且可能感觉使用起来也比较简单,但如果在try catch finally语句块中遇到return语句,开发者可能就会遇到一些逻辑问 ...

  9. python 顺序传入

  10. Tcp之双向通信

    TestServer.java package com.sxt.tcp; /* * 服务端 */ import java.io.DataInputStream; import java.io.Data ...