之前有看过一些类似的文章,以为嵌入不会遇到太多坑

结果。。。    其他不说,先来描述下跳坑的过程

先定义Ueditor.js类,这个和网上版本类似

import React, { Component } from 'react';
require('../../utils/ueditor/ueditor.config.js');
require('../../utils/ueditor/ueditor.all.min.js');
require('../../utils/ueditor/lang/zh-cn/zh-cn.js'); class Ueditor extends Component{
constructor(props){
super(props);
console.log('props');
console.log(props);
this.state = {
'id': props.id,
'height': props.height,
'name': props.name,
'value': props.content,
};
console.log('state');
console.log(this.state);
}
componentDidMount(){
this.initEditor()
}
componentWillUnmount() {
// 组件卸载后,清除放入库的id
UE.delEditor(this.props.id);
}
initEditor() {
const id = this.state.id;
const ueEditor = UE.getEditor(this.state.id , {
initialFrameHeight : 500
});
const self = this;
ueEditor.ready((ueditor) => {
if (!ueditor) {
UE.delEditor(id);
self.initEditor();
}
});
}
render(){
return (
<script id={this.state.id} name={this.state.name} type="text/plain">
{props.content}
</script>
)
}
}
export default Ueditor;

这个要注意的是

import React, { Component } from 'react';

这个要注意下,如果写成  import React, Component  from 'react';  有可能会报错

接下来就是在组件调用它啦

import Ueditor from './Ueditor.js';
<Ueditor content={this.state.content} name="content" id="content" height="200" />

按网上的说法放了进去,一运行,一脸懵逼,报的是一些css,js文件加载不了。。。

打开ueditor/ueditor.config.js文件

  /**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL 。。。

我不太清楚直接用react是怎么加载静态资源文件的,所以我配了一个站点,把ueditor包丟了进去

UEDITOR_HOME_URL: "http://www...com/ueditor/"

先在网页访问,确保静态资源可以直接访问,然后刷新就能加载出百度编辑器了

感觉成功了一半,接下来就是苦逼的绑定数据了!!!

其实就是一个函数,

UE.getEditor('content').getContent()

这里有一个坑,就是如果对应的content不在,或者是其他名称的话,它会一直报

我是一向打破砂锅问到底的,

你如果在源代码console.log(c)的话,是null!!!正常情况是一大段现在的页面的百度编辑器实例的html代码,那要怎么确定变量不是content是什么呢

好想给自己一巴掌,为什么要用remark,

console.log(UE.getEditor('remark').getContent());

果然这样一输出就有值了,提交表单前把值赋给提交的data就OK了!

React antd嵌入百度编辑器(css加载不到等问题,'offsetWidth' of null)的更多相关文章

  1. css加载优化

    <head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...

  2. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  3. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  4. CSS 加载新方式

    Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...

  5. css加载会造成阻塞吗?

    终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...

  6. css加载会造成阻塞吗

    本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...

  7. 使用 JS 嵌入的方式来加载 Flash 插件,在各浏览器中播放视频

    嵌入插件 使用 object 和 embed 标签 这种方法用到的是 Object 和 Embed 标签,可以看到 object 的很多参数和 embed 里面的很多属性是重复的.浏览器兼容性,有的浏 ...

  8. css加载字体跨域问题

    刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...

  9. php js css加载合并函数 宋正河整理

    <?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true);   ...

随机推荐

  1. CSS3快速浏览器前缀的方法

    在做前端开发时,经常要在css3的属性前加上各浏览器厂商的前缀:,如 Chrome(谷歌浏览器) :-webkit- Safari(苹果浏览器) :-webkit- Firefox(火狐浏览器) :- ...

  2. Nginx为什么比Apache Httpd高效

    转载于:http://www.toxingwang.com/linux-unix/linux-basic/1712.html 一.进程.线程? 在回答nginx 为什么比apache更高效之前,必须要 ...

  3. JAVA之接口与实现

    /** *  * 功能:接口与实现 * 接口也体现了多态性 */package com.test; public class test5 { /**     * @param args     */  ...

  4. gamma校正原理

    http://blog.csdn.net/u013286409/article/details/50239377 目录(?)[-]   图2中左图为原图,中图为gamma = 1/2.2在校正结果,原 ...

  5. Manthan, Codefest 16 D. Fibonacci-ish(暴力)

    题目链接:点击打开链接 题意:给你n个数, 问最长的题目中定义的斐波那契数列.  思路:枚举開始的两个数, 由于最多找90次, 所以能够直接暴力, 用map去重.  注意, 该题卡的时间有点厉害啊. ...

  6. Java学习之泛型和异常

    泛型 1,设计原则或目的:只要代码在编译的时候没有错误,就不会抛异常.  2,泛型通配符  :类型通配符一般是使用 ? 代替具体的类型实参.注意了,此处是类型实参,而不是类型形参!相当于(父类作用)L ...

  7. EffectiveJava(2)应对多个构造函数应当使用构建器

    ** 应对多个构造函数应当使用构建器 ** 静态工厂和构造器都不能很好的扩展到大量的可选参数,遇到大量参数有大量可选域时,只能重复生成可选参数递增的构造方法,这种构造模式叫做重叠构造器模式 javaB ...

  8. 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. TP框架中/ThinkPHP/Library/Think/Storage/Driver/File.class.php 错误

        /ThinkPHP/Library/Think/Storage/Driver/File.class.php LINE: 48错误 这是一个将windows下运行正常的ThinkPHP框架移到L ...

  10. C++ 智能指针详解(转)

    C++ 智能指针详解   一.简介 由于 C++ 语言没有自动内存回收机制,程序员每次 new 出来的内存都要手动 delete.程序员忘记 delete,流程太复杂,最终导致没有 delete,异常 ...