@xme-react/editor v0.1.5

富文本编辑器

使用方式

1. 通过import的方式

@import '@xm/editor';

const UPLOADER_URL = `/sfs/webUpload/file?uid=${cookie.userId}&ts=${cookie.timeStamp}&token=${cookie.token}`;

//要加载的ckeditor.js的地址
// 不填默认为https://web.jituancaiyun.com/statics/editor
// 完整的ckeditor.js路径为https://web.jituancaiyun.com/statics/editor/ckediter.js
const editorPath = 'https://web.jituancaiyun.com/statics/editor';

// 动态加载编辑器
CKEDITOR_LOADER(path, function() {
	console.log(‘加载完成);
});

// 初始化
// 默认使用了uploadBySelf(上传图片)插件与toggleToolbar（编辑器失去焦点（内容为空）隐藏编辑器，否则隐藏编辑器的toolbar）插件
const editor = CKEDITOR.replace(id, {
  // 编辑区域失去焦点时传过来当前编辑器中的内容
  onTextChange: function(id, value) {},
  // 上传图片
  uploadUrl: 'http://web.jituancaiyun.net/' + UPLOADER_URL
});

// 如果不想要uploadBySelf或者toggleToolbar
const editor1 = CKEDITOR.replace(id, {
  // 编辑区域失去焦点时传过来当前编辑器中的内容
  onTextChange: function(id, value) {},
  uploadFileName: 'xxx',
  // 上传图片
  uploadUrl: 'http://web.jituancaiyun.net/' + UPLOADER_URL,
  // 上传成功后，根据服务端返回的数据获取url
  getUploaderUrl: function(result) {
    if (typeof result === 'string') {
      try {
        result = JSON.parse(result)
      } catch(e) {}
    }

    if (result && result.fileUrl) {
      return result.fileUrl
    }

    return ''
  },
  extraPlugins: '', // 全部不要
});

2. 通过script引入的方式

<script src="https://web.jituancaiyun.com/statics/editor/ckeditor.js"></script>

打包

mac下npm run build windows下 暂无