reactjs 中使用百度Ueditor富文本编辑器 

 1 import React from 'react';
 2  
 3 var Ueditor = React.createClass({ 
 4     componentDidMount(){
 5         var editor = UE.getEditor(this.props.id, {
 6              //工具栏
 7                 toolbars: [[
 8                     'fullscreen', 'source', '|', 'undo', 'redo', '|',
 9                     'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',  
10                     '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
11                     'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
12                     'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
13                     'directionalityltr', 'directionalityrtl', 'indent', '|',
14                     'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 
15                     'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
16                     'simpleupload',  
17                     'horizontal', 'date', 'time',  
18                 ]]
19                 ,lang:"zh-cn"
20                 //字体
21                 ,'fontfamily':[
22                    { label:'',name:'songti',val:'宋体,SimSun'},
23                    { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
24                    { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
25                    { label:'',name:'heiti',val:'黑体, SimHei'},
26                    { label:'',name:'lishu',val:'隶书, SimLi'},
27                    { label:'',name:'andaleMono',val:'andale mono'},
28                    { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
29                    { label:'',name:'arialBlack',val:'arial black,avant garde'},
30                    { label:'',name:'comicSansMs',val:'comic sans ms'},
31                    { label:'',name:'impact',val:'impact,chicago'},
32                    { label:'',name:'timesNewRoman',val:'times new roman'}
33                 ]
34                 //字号
35                 ,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]
36                 , enableAutoSave : false
37                 , autoHeightEnabled : false
38                 , initialFrameHeight: this.props.height
39                 , initialFrameWidth: '100%'
40                 ,readonly:this.props.disabled
41         });
42         var me = this;
43         editor.ready( function( ueditor ) {
44             var value = me.props.value?me.props.value:'<p></p>';
45             editor.setContent(value); 
46         }); 
47     },
48     render : function(){
49         return (
50              <script id={this.props.id} name="content" type="text/plain">
51                   
52              </script>
53         )
54     }
55 })
56 export default Ueditor;

上面是我写的一个简单富文本组件

使用时就像一般表单一样

<Ueditor value={formData.content} id="content" height="200" disabled={!this.props.canEdit}/>

 

入口页面加载ueditor插件

1 <!-- ueditor -->
2 <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
3 <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
4 <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

 


 

posted @ 2016-02-17 13:30  Jessie-d  阅读(542)  评论(0)    收藏  举报