React 调用百度富文本 及存在的问题

实现:

        var React = require('react');
        // 将下载的百度富文本文件包导入到合适位置;这里放入的是dist目录下面
        require('../../dist/ueditor/ueditor.config.js');
        require('../../dist/ueditor/ueditor.all.min.js');
        require('../../dist/ueditor/lang/zh-cn/zh-cn.js');


        var UEditor = React.createClass({
            displayName: 'UEditor',

            // 设置默认的属性值
            getDefaultProps: function () {
                return {
                    disabled: false,
                    height: 500,
                    content: '',
                    id: 'editor'
                };
            },

            render: function () {
                return (
                    <div>
                        <script id={this.props.id} name="content" type="text/plain">
                        </script>
                    </div>
                );
            },

    调用初始化方法
            componentDidMount: function () {
                this.initEditor();
            },

    // 编辑器配置项初始化
            initEditor: function () {
                var id = this.props.id;
                var ue = UE.getEditor(id, {
                    // 工具栏,不配置有默认项目
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',
                        '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'emotion',
                        'horizontal', '|', 'date', 'time', '|', 'insertimage'
                    ]],
                    lang: 'zh-cn',
                    // 字体
                    'fontfamily': [
                           {label: '', name: 'songti', val: '宋体,SimSun'},
                           {label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
                           {label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
                           {label: '', name: 'heiti', val: '黑体, SimHei'},
                           {label: '', name: 'lishu', val: '隶书, SimLi'},
                           {label: '', name: 'andaleMono', val: 'andale mono'},
                           {label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
                           {label: '', name: 'arialBlack', val: 'arial black,avant garde'},
                           {label: '', name: 'comicSansMs', val: 'comic sans ms'},
                           {label: '', name: 'impact', val: 'impact,chicago'},
                           {label: '', name: 'timesNewRoman', val: 'times new roman'}
                    ],
                    // 字号
                    'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36],

    // 为编辑器实例添加一个路径,必需项
                    'UEDITOR_HOME_URL': '/react/dist/ueditor/',
                    // 上传图片时后端提供的接口
                    serverUrl: window.api_host + '/innerMessage/uploadImage',
                    enableAutoSave: false,
                    autoHeightEnabled: false,
                    initialFrameHeight: this.props.height,
                    initialFrameWidth: '100%',

    // 是否允许编辑
                    readonly: this.props.disabled
                });
                this.editor = ue;
                var self = this;


                this.editor.ready(function (ueditor) {
                    if (!ueditor) {

// 如果初始化后ueditor不存在删除后重新调用
                        UE.delEditor(self.props.id);
                self.initEditor();
                    }
                });
            },
            // 获取编辑器的内容
            getContent: function () {
                if (this.editor) {
                    return this.editor.getContent();
                }
                return '';
            },
            /**
             * 写入内容|追加内容
             * @param {Boolean} isAppendTo    [是否是追加]
             * @param {String}  appendContent [内容]
             */
            setContent: function (appendContent, isAppendTo) {
                if (this.editor) {
                    this.editor.setContent(appendContent, isAppendTo);
                }
            },
            // 获取纯文本
            getContentTxt: function () {
                if (this.editor) {
                    return this.editor.getContentTxt();
                }
                return '';
            },
            // 获得带格式的纯文本
            getPlainTxt: function () {
                if (this.editor) {
                    return this.editor.getPlainTxt();
                }
                return '';
            },
            // 判断是否有内容
            hasContent: function () {
                if (this.editor) {
                    return this.editor.hasContents();
                }
                return false;
            },
            // 插入给定的html
            insertHtml: function (content) {
                if (this.editor) {
                    this.editor.execCommand('insertHtml', content);
                }
            },
            // 使编辑器获得焦点
            setFocus: function () {
                if (this.editor) {
                    this.editor.focus();
                }
            },
            // 设置高度
            setHeight: function (height) {
                if (this.editor) {
                    this.editor.setHeight(height);
                }
            }
        });


        module.exports = UEditor;

实现中的问题及解决方法

       1.上传图片时的跨域问题

在源码里 有 header['X_Requested_With'] = 'XMLHttpRequest';

后端需要配置    header('Access-Control-Allow-Headers', 'AccessToken, Content-Type, WebOrigin,X-Requested-With,X_Requested_With');

       2. 进入文本编辑界面编辑器没有加载出来

可能原因: 放置编辑器的容器id, 容器下的编辑器已经存在

解决方法如代码所示

this.editor.ready(function (ueditor) {

             if (!ueditor) {

// 如果初始化后ueditor不存在删除后重新调用
                UE.delEditor(self.props.id);
                self.initEditor();
             }
         })

3.注意这两个参数配置

'UEDITOR_HOME_URL': '/react/dist/ueditor/', // 编辑器实例路径,即ueditor文件包所放置的位置

   serverUrl: window.api_host + '/innerMessage/uploadImage', // 后端提供加载图片接口,这是个共同接口接口包括了后端配置的config.json文件 通过url中action

值不同来区分(config|uploaimage 等)

支持拖拽 复制 截图 excel ----------------------------------------------------------------------------------------------------------------------------------------------复制代码 /** * Created by zhanglei on 2017/5/23. */ import React, { Component, PropTypes } from 'react'; import { Icon,Modal,message } from 'antd'; import ContentEditable from 'react-contenteditable' import './edit.less' export default class Editor extends Component { static propTypes = { className: PropTypes.string, value:PropTypes.string, editColor:PropTypes.string, }; constructor(props){ super(props); ['inputTextChange','onchangefile','onpaste','ondrop','onParseOrDrop'].map(item=>this[item]=this[item].bind(this)); this.state={ value:null, tableData:[], linkModel:false, visible:false, isColor:false, myDisabled:false, isEdit:true, isFace:false, isBackground:false, linkValue:null, editStatus:[ {label:'加粗',value:'bold',icon:'zitijiacu'}, {label:'斜体',value:'italic',icon:'zitixieti'}, {label:'下划线',value:'underline',icon:'xiahuaxian'}, {label:'链接',value:'createLink',icon:'lianjie'} ], fontSizeData:[ {title:'大号',value:'h1',icon:'H1'}, {title:'中号',value:'h2',icon:'h2'}, {title:'正常',value:'h3',icon:'h3-copy-copy'}, {title:'小号',value:'h4',icon:'h4'} ], isSent:true, colorData:[ 'red','orange','yellow','#01FF01','#98F5FF','#8686FF','rgb(216, 154, 255)', '#fff', '#DE1607','#E49402','#E2E205','#04DE04','rgb(71, 237, 255)','#6363F9','rgb(204, 123, 255)', 'rgb(206, 205, 205)', '#C10303','#D08702','#C5C503','#07C307','rgb(0, 221, 245)','#4C4CFB','rgb(184, 70, 255)', 'rgb(183, 183, 183)', '#960505','#AB7005','#ABAB03','#02A902','rgb(6, 171, 189)','#3333FF','rgb(167, 25, 255)', 'rgb(148, 148, 148)', '#710303','#989805','#989805','#059C05','rgb(9, 138, 152)','blue','#A020F0', 'rgb(76, 75, 75)', '#5D0404',' #757504','#757504','green','rgb(2, 99, 109)','blue','#A020F0', '#000','rgb(56, 2, 2)' ], } }; componentDidMount(){ document.addEventListener('click',this.documentClick); }; componentWillReceiveProps(nextProps){ if('value' in nextProps&&this;.state.editValue !== nextProps.value){ this.setState({editValue:nextProps.value}) } } //全局取消隐藏颜色框 documentClick=(e)=>{ const {isColor,isBackground} = this.state; if(isColor||isBackground){ let en = e.srcElement||e.target; const name = '.color-content'; while(en){ if(en.className&&en;.className === name.replace('.','')){ return; } en = en[removed]; } this.setState({isColor:false,isBackground:false}); } }; //卸载颜色框 componentWillUnmount(){ document.removeEventListener('click',this.documentClick) } /* * <粘贴功能> * @param onParseOrDrop 通用方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值