joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
325 lines (316 loc) • 11.3 kB
JavaScript
/**
*
* @api {} 富文本编辑器
* @apiName 带自定义功能的富文本编辑器组件
* @apiGroup 组件使用
*
* @apiParam {Object} config 非必填，编辑器配置 { language: 'en', ..... }
* @apiParam {Object} value 非必填，内容默认值, 当此值为对象时， onChange中返回的也是此对象
* @apiParam {String} value 非必填，内容默认值, 当此值为对象时， onChange中返回的是字符串
* @apiParam {Object} varSetting 非必填，插件值
* @apiParam {function} onChange 编辑器内容发生变化之后的回调事件，function({value: object||string, varSelected: Array, event: event})
* @apiSuccessExample {json} 使用案例:
*
参数说明：
config 所有参数非必填 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
config = {
toolbarPosition: 'jwedtoolbar', 工具栏位置
autoGrow_maxHeight: 300, 自增最大高度
autoGrow_minHeight: 300, 自增最小高度
editorName: 'editor01', 编辑器名称，当一个页面中同时存在两个编辑器时需要区分
imageFormat: ['.jpg', '.png'],
audioFormat: ['.mp3'],
videoFormat: ['.mp4'],
...
}
multilang = false
multilang = {
langs:[
{lang: 'zh-cn', name:'中文'},
{lang: 'en', name:'en'}
],
curLang: 'zh-cn'
}
value = {
'zh-cn': 'awefaewawef',
'en': '1134567',
}
value = 'SQEEFEFEWFEF';
varSetting = false
varSetting = {
list:[
{id:'1',name: {'zh-cn': '活动名称', en: 'awef', jan: '11111'} },
{id:'2',name: {'zh-cn': '活动内容', en: 'awef', jan: '22222'} },
],
selected:[]
}
import FCKEditor from 'joywok-material-components/lib/jweditor/extplugin';
onChange({value: object||string, varSelected: Array, event: event}){
}
<FCKEditor onChange={(e)=>this.onChange(v)} config={config} value={value} multilang={multilang} varSetting={varSetting} />
*
*
*/
import React from 'react';
require('./style/index.css');
import Editor from './index';
import { Select, MenuItem } from '@material-ui/core';
require('./crypto');
class ExtPluginsEditor extends React.Component{
initConfig(){
let s = {
editorName: 'JWCK' + this.guid(),
editorConfig: this.props.config === undefined?{}:this.props.config,
showAudioDialog: false,
showVideoDialog: false,
showImageDialog: false,
toolbarPosition: this.props.toolbarPosition || false,
showLangs: this.props.showLangs===false?false:true,
varSetting: this.props.varSetting || false,
value: '',
curValue: '',
curLang: '',
varSelected: this.props.varSetting !== false && this.props.varSetting!==undefined && this.props.varSetting.selected?this.props.varSetting.selected:[]
}
if( _.isEmpty(s.editorConfig) ){
s.editorConfig = {appType: '', appId: ''};
}
if( this.props.multilang ){
if( _.isArray(this.props.multilang.langs) ){
s.multilang = {langs: this.props.multilang.langs};
if( _.isString(this.props.multilang.curLang) ){
s.multilang.curLang = this.props.multilang.curLang;
s.curLang = this.props.multilang.curLang;
}else{
s.multilang.curLang = s.multilang[0].lang;
s.curLang = s.multilang[0].lang;
}
}else{
s.multilang = false;
}
}else{
s.multilang = false;
}
if( _.isString( this.props.value ) === true ){
s.curValue = this.props.value;
s.value = this.props.value;
}else if( _.isObject(this.props.value) ){
s.value = {};
_.each(s.multilang.langs, (item)=>{
s.value[item.lang] = this.props.value[item.lang] || '';
});
s.curValue = s.value[s.multilang.curLang] || '';
}else{
s.curValue = '';
s.value = '';
}
if( this.props.varSetting ){
if( _.isArray(this.props.varSetting.list) ){
s.varSetting = {
list: this.props.varSetting.list
}
if( _.isArray(this.props.varSetting.selected) ){
s.varSetting.selected = this.props.varSetting.selected;
}else{
s.varSetting.selected = [];
}
}else{
s.varSetting = false;
s.varSelected = [];
}
}else{
s.varSetting = false;
s.varSelected = [];
}
if( s.varSetting!==false && s.toolbarPosition===false ){
s.toolbarPosition = 'jwedtoolbar' + this.guid();
}
this.state = s;
}
componentDidMount(){
let s = {
curValue: this.encodeValue( this.state.curValue ),
value: this.encodeValue( this.state.value )
};
this.setState( s );
}
guid(){
function S4(){
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
return (S4()+S4()+S4()+S4()+S4()+S4()+S4()+S4());
}
constructor(props) {
super(props);
this.initConfig();
}
componentWillReceiveProps(d){
let setVal = {};
let difVar = false;
if( d.varSetting===undefined ) d.varSetting = false;
if( !_.isEqual( d.varSetting, this.state.varSetting ) ){
setVal.varSetting = d.varSetting;
setVal.toolbarPosition = 'jwedtoolbar' + this.guid();
if(d.varSetting && d.varSetting.list && d.varSetting.list.length>0){
difVar = true;
};
}
if( d.multilang===undefined ) d.multilang = false;
if( !_.isEqual( d.multilang, this.state.multilang ) ){
setVal.multilang = d.multilang;
setVal.curValue = this.encodeValue(d.value[ d.multilang.curLang ], d.multilang.curLang);
setVal.curLang = d.multilang.curLang;
}
if( !_.isEqual( d.value, this.state.value ) ){
setVal.value = d.value;
if( d.multilang && d.multilang.curLang ){
setVal.curValue = this.encodeValue(d.value[ d.multilang.curLang ], d.multilang.curLang);
}else{
setVal.curValue = d.value;
}
}
if(d.multilang===false && this.state.multilang===false && d.value==='' ){
setVal.value = d.value;
setVal.curValue = d.value;
}
if( Object.keys( setVal ).length>0 ){
this.setState( setVal, ()=>{
if(difVar===true) this.decodeDiffValue();
});
}
}
decodeDiffValue(){
console.log('111')
let {value, curValue} = this.state;
this.setState({value: this.encodeValue( value ), curValue: this.encodeValue(curValue) });
}
render(){
let value = this.state.curValue || '';
return <div className="joywok-editor-wrap" id={this.state.editorName}>
{
this.state.multilang===false?'':<div className={this.state.showLangs===true?'jwck-lang-bg':'jwck-lang-bg jwck-hide'}>
<div className="jwck-lang">
<Select inputProps={{name: 'language'}} value={this.state.multilang.curLang} onChange={this.changeLanguage}>
{
this.state.multilang.langs.map(item=>{
return <MenuItem value={item.lang}>{item.name}</MenuItem>
})
}
</Select>
</div>
</div>
}
{
this.state.toolbarPosition===false?'':<div className={'jwedtoolbar ' + this.state.toolbarPosition }><div></div></div>
}
{
this.state.varSetting===false?'':this.renderExtPluginsList()
}
<Editor toolbarStyle={this.state.showLangs===true?'':'jwedtoolbarborder'} onRef={ (ref) => {this.$Child = ref; }} curLang={this.state.curLang} editorName={this.state.editorName} toolbarPosition={this.state.toolbarPosition} onChange={this.onChangeEditor} defaultValue={value} config={this.state.editorConfig} />
</div>
}
encodeValue( v, curLang ){
let self = this;
if( this.state===undefined || this.state.varSetting===undefined || this.state.varSetting===false ){
return v;
}else{
if( typeof v === 'string' ){
_.each( this.state.varSetting.list, (item)=>{
let lang = curLang===undefined?self.state.multilang.curLang:curLang
let name = item[lang];
v = v.replace(eval('/(\\\{'+ item.id +'\\\})/g'), '<div contenteditable="false" id="jwpl_'+ item.id +'" class="jwck-plugin-item" >'+ name +'<del> </del></div>');
});
return v;
}else{
_.each(v, (val, key)=>{
_.each(self.state.varSetting.list, (item)=>{
let lang = curLang===undefined?self.state.multilang.curLang:curLang
let name = item[lang];
v[key] = (val + '').replace(eval('/(\\\{'+ item.id +'\\\})/g'), '<div contenteditable="false" id="jwpl_'+ item.id +'" class="jwck-plugin-item">'+ name +'<del> </del></div>');
})
});
return v;
}
}
}
decodeValue( v ){
if( this.state.varSetting===false ){
return v;
}else{
if( typeof v === 'string' ){
v = v.replace(/<div contenteditable="false" id="jwpl_(.*?)" class="jwck-plugin-item">(.*?)<\/div>/ig, '{$1}');
}else{
_.each(v, (val, key)=>{
v[key] = (val + '').replace(/<div contenteditable="false" id="jwpl_(.*?)" class="jwck-plugin-item">(.*?)<\/div>/ig, '{$1}');
});
}
return v;
}
}
selectPluginItem( item, name ){
this.$Child.insertItem( '<div contenteditable="false" id="jwpl_'+ item.id +'" class="jwck-plugin-item">'+ name +'<del></del></div>' );
}
onChangeEditor = (e)=>{
let v = this.state.value;
if( this.state.multilang===false ){
v = e.editor.getData();
}else{
if( typeof v==='string' ) v={};
v[this.state.multilang.curLang] = e.editor.getData();
}
this.setState({value: v}, ()=>{
this.changeHandle();
});
}
changeHandle(lang){
let v = this.state.value;
let varSelected = this.state.varSelected;
v = this.decodeValue( v );
let ret = {value: v, varSelected: varSelected};
if( !_.isEmpty(lang) ){
ret.multilang = lang;
if( _.isEmpty( ret.value[lang.curLang] ) ){
ret.value[ lang.curLang ] = '';
}
}else{
if( this.state.multilang!==false ){
ret.curLang = this.state.multilang.curLang;
ret.multilang = this.state.multilang;
if( _.isEmpty( ret.value[ret.curLang] ) ){
ret.value[ret.curLang] = '';
}
}
}
typeof this.props.onChange === 'function' && this.props.onChange( ret );
}
changeLanguage = (e)=>{
let lang = _.clone( this.state.multilang );
lang.curLang = e.target.value;
this.changeHandle( lang );
// this.setState({multilang: lang}, ()=>{
// this.changeHandle(lang);
// });
}
renderExtPluginsList(){
let self = this;
return <div className="jwck-plugin-items"><div className="jwck-plugin-items-w">{_.map(this.state.varSetting.list, item=>{
// let name = '';
// if( self.state.multilang === false ){
// name = item.name;
// }else{
// name = item.name[self.state.multilang.curLang] || ''
// }
let name = item[self.state.multilang.curLang] || '';
// item.cname = name;
return name===''?'':<div className="jwck-plugin-item" onClick={()=>self.selectPluginItem(item, name)}>{name}</div>;
})}</div></div>;
}
removePluginItem( index ){
let items = this.state.varSelected;
items.splice(index, 1);
this.setState({varSelected: items}, ()=>{
this.changeHandle();
});
}
}
export default ExtPluginsEditor;