富文本编辑器1.1.x
1.1.x版本主要是在1.0版本的基础上，修改了配置化内容。
例如上传视频，图片，word文档 ，所有内容均为可配置化的参数。
1.0.x版本
针对toc组发帖日记评论回复等，针对性开发，接口/参数均为固定格式
1.1.0版本
将固定的上传参数，上传请求头，请求主体， 请求前中后回调，均暴露给开发人员，开发人员可根据各组业务实现不同逻辑
1.1.1版本
1.1.2版本
1.1.3版本
由于返回数据字段不统一， 需在编辑器中对不统一的做兼容性处理
1.1.4版本
1.1.5版本
针对后缀名例如.JPg, .Gif, .PNG 等等，包括 file 文件名特殊情况下，做了兼容性处理
1.1.6版本
针对window中没有七牛.js 并配置了"video " 七牛上传的情况，做了js加载 处理。
针对没有引入xss.js 并需要粘贴过滤，或word文档 过滤的情况， 做了js加载处理
1.1.7版本
判断若无replaceUrl 那么点击图片后的toolbar不会显示添加水印按钮
1.1.8 --- 1.1.11
fixed bug
1.1.12版本
增加图片添加、删除、修改链接功能， 并调整图片工具栏位置。
1.1.14版本
增加上传图片待插入区域拖拽排序功能。
uploadImg.awaitDragsort=true
另外修复点击图片会回到编辑器顶部的问题
editor.config.uploadImg = {
...
imgToolbar: true（默认值，显示toolbar）
needDrag: true (默认值： 可以拖拽上传)
}
1.1.17版本
升级内容包括 兼容后缀名、特殊字符的文件名验证， 提供参数允许用户手动关闭图片工具栏、根据参数判断是否显示水印等等功能
1.1.19
提供视频宽高比例等
1.1.20
iconfont 处理兼容问题
1.1.21
.添加参数shiftEnter（默认为false） 改为true之后，可以使用shift + enter 进行换行。一般需要同时配置参数forbidEnter 为true 。修改forbidEnter 逻辑， 由直接return false改为 e.preventDefault(); (不支持ie8)
1.1.22
背景：由于nginx 限定，前后端协商，由默认上传图50Mb ,修改为30Mb.
描述
背景： 由于1.0.x 定制化元素更多一些，无法满足其他业务组的需求，所以在1.0.X的基础上，将一些偏向业务的内容抽取出来， 由各个组的成员自行配置。
优点：1. 上传等逻辑配置化，请求前、失败、成功均暴露到外部，可根据各组业务实现不同功能。2. 合适大部分业务组的需求。
变更字段
配置化字段请 参照 1.0.x版本
删除字段
-
uploadImgUrl- 1.0.x版本， uploadImgUrl作为上传图片的配置
- 1.1.x版本， 去掉此字段，将上传图片的配置进行了包裹，具体看下方。
-
sys- 1.0.x版本，用来判断站点
- 1.1.x版本， 去掉此字段，将参数配置进行了包裹，具体看下方。
-
sysType- 1.0.x版本，用来判断发帖，日记
- 1.1.x版本， 去掉此字段，将参数配置进行了包裹，具体看下方。
-
compelWaterMark- 1.0.x版本，用来判断是否强制添加，或不能添加水印
- 1.1.x版本， 去掉此字段，将配置进行了包裹，具体看下方。
-
uploadHeaders
- 1.0.x版本，用来自定义上传header参数
- 1.1.x版本去掉此字段，将配置进行了包裹，具体看下方。
其余删除的字段：
uploadImgFns(储存上传回调)、customUpload(自定义上传) 、uploadParams(自定义上传时传递的参数)、uploadTimeout(超时时间) 、withCredentials( 跨域上传时传递 cookie) 、hideLinkImg(隐藏网络图片)
新增字段：
- alert 可配置化， 只需
editor.config.alert = （各组业务的alert）即可实现无缝连接 - uploadImg 用户自定义图片相关默认参数
- uploadVideo 用户自定义视频相关默认参数
- uploadWord word文档相关默认参数
- qiniuConfig 七牛配置
- emotionsConf 表情自定义相关参数
uploadImg
默认配置：
editor.config.uploadImg = {
//支持上传格式
accept: '.jpg, .png , .gif',
// 单张最大的size(mb)
uploadMaxSize: 50,
uploadType: 'POST',
// 上传图片的url
uploadUrl: '',
// 上传时的参数
uploadParams: {},
uploadTips: '提示：选择图片大小不超过50M，仅支持jpg，png，gif格式图片',
// 自定义上传header
uploadHeaders: {},
// 上传后统一格式
customResponse: null,
// 上传前的回调函数
uploadBefore: null,
// 强制上传图片添加水印 0 不强制 1 强制添加 2 强制不添加
compelWaterMark: 0,
// 上传失败后的回调函数
uploadError: null,
// 上传成功后的回调函数
uploadSuccess: null,
// 是否需要待插入图片
awaitMsg: true,
// 是否需要图片素材库
imgLibrary: true,
// 图片素材库请求url (需配置imgLibrary 为true)
imgLibraryUrl: '',
// 图片素材库上传请求参数
imgLibraryParams: null,
// 图片素材库自定义上传header
imgLibraryHeaders: null,
// 图片素材库请求type
imgLibraryType: null,
// 图片素材库请求失败回调
imgLibraryError: null,
// 图片素材库请求成功回调
imgLibrarySuccess: null,
// 待插入图片个数
awaitImgCount: 9,
// 替换水印接口类型
replaceType: null,
// 替换水印接口url
replaceUrl: '',
// 替换水印自定义上传header
replaceHeaders: null,
// 替换水印参数
replaceParams: null,
// 替换水印失败回调函数
replaceError: null,
// 替换水印发送请求之前
replaceBefore: null,
// 替换水印成功回调函数
replaceSuccess: null，
// 是否需要图片待插入区域拖拽排序功能
awaitDragsort： false，
// 是否需要图片添加链接功能
imgLink: false
}
accept 支持上传的格式。 注意： 必须按照
'.jpg , .png, .xxx'进行配置，否则在火狐等浏览器会出现意外情况。
- 默认值： '.jpg, .png , .gif'
- 工具栏中上传时，会指定规定文件进行上传，自动过滤非此格式的文件
- 拖拽上传时，如果不是规定文件，会弹出提示。 提示语按照accept中配置中展示。例如： “仅支持 '.jpg , .png, .xxx'格式的图片”uploadMaxSize 单张最大的size(mb)
+ 默认值： 50
+ 自动过滤比配置中的最大size 更大的文件
+ 若有超出大小的文件， 提示语为: " xxxx.jpg 文件过大， 仅支持 uploadMaxSize (mb)以内的图片上传"uploadType 上传图片的请求类型。
+ 默认值： ‘post’uploadParams 上传图片的参数
+ 默认值： {}uploadTips 工具栏上传控件下的提示语
+ 默认值： '提示：选择图片大小不超过50M，仅支持jpg，png，gif格式图片'
+ 注意： 修改了 uploadMaxSize 或 accept 请主动修改uploadTips ，以免造成不必要的误解uploadHeaders 自定义上传header
+ 默认值： {}uploadBefore 上传前的回调函数。
+ 默认值： null
+ 参数：
（1）formData 上传前的参数，如果配置了 uploadParams ， 会将所有的参数以此append到formData中。
（2）file: 本次上传的文件（文件集）返回一个对象，对象中可能是 { base64: 单文件base64 }
或者 { fileList ：文件列表 }
（3）editor 对象
+ 注意： 一定要将上传参数return 回来，否则终止此次上传！
editor.config.uploadImg = {
...
uploadBefore(formData,obj,editor) {
/**
* formData 当前提交的form表单，如果配置了上传参数。则formData中包括上传的参数
* tips：uploadParams 可以不配置，uploadBefore中自己添加
* 例如： formData.append('type',1)
* uploadBefore 主要是用来处理一些上传前的业务，以及上传key变化的，由业务前端控制，更
利于今后维护
*/
const key = 'imgFile'
if (obj.base64) {
formData.append('format','1');
formData.append(key,obj.base64);
return formData
}
if(obj.file){
formData.append(key,obj.file);
return formData;
}
}
}
- customResponse 上传后数据格式统一
editor.config.uploadImg = {
...
customResponse(res) {
/**
* res 为当前返回的数据结构，最终统一为 编辑器可识别的结构
* {"errorCode":0,"errorMsg":"","responseData": [{"sys":0,"uid":"1678383","type":1,
* "url":"https:\/\/img2.soyoung.com\/tieba\/web\/20201201\/4\/6fb03b16e22eae26bc98b15ea801d160.png",
* "width":204,"height":77,"md5_file":"6fb03b16e22eae26bc98b15ea801d160","watermark":1,"category":1,
"id":"3242"}]}
*/
return {
errorCode: 0,
errorMsg: ""
....
}
}
}
- uploadError上传失败的回调函数
+ 默认值： null
+ 参数： 1失败信息，2editor对象。 - uploadSuccess 上传成功后的回调函数
+ 默认值： null
+ 参数： 1成功后的数据，2 editor 对象 - compelWaterMark 强制上传图片添加水印 0 不强制 1 强制添加 2 强制不添加
+ 默认值 0 可选择 - awaitMsg 是否需要待插入图片
+ 默认值： true
+ 如果选择了false， 则编辑器会隐藏插入图片按钮， 也就是上传后就插入页面中。
+ 注意： 如果这里选择了false， 则不能显示图片素材库，因为互斥。 - imgLibrary 是否需要图片素材库
+ 默认值： true
+ 注意： 如果awaitMsg 为false， 这里的值将自动改为false. - imgLibraryUrl 图片素材库请求url
+ 默认值： ''
+ 注意，如果无配置imgLibraryUrl 则 imgLibrary的值将改为false - videoLibraryParams 视频素材库上传请求参数
+ 默认值： null
+ 注意： 如果没有设置值，则会将uploadParams 作为默认参数传递。 - videoLibraryHeaders 视频素材库自定义上传header
+ 默认值： null - videoLibraryType 视频素材库请求type
+ 默认值：null
+ 注意： 如果没设置这里的值， 则取uploadType - videoLibraryError 视频素材库请求失败回调
+ 默认值： null
+ 使用说明： 请参照uploadImg 中的uploadError - videoLibrarySuccess 视频素材库请求成功回调
+ 默认值： null
+ 使用说明： 请参照uploadImg 中的videoLibrarySuccess
uploadVideo
用户自定义视频相关默认参数
editor.config.uploadVideo = {
// 强制上传视频添加水印 0 不强制 1 强制添加 2 强制不添加
compelWaterMark: 0,
accept: '.mp4',
// 上传视频最大size(MB)
uploadMaxSize: 300,
uploadType: 'POST',
uploadTips: '提示：选择的文件大小不超过300M，仅支持mp4视频格式',
// 上传时的参数
uploadParams: {},
// 上传前的回调函数。
uploadBefore: null,
// 上传中的回调函数
uploadProgress: null,
// 上传失败后的回调函数
uploadError: null,
// 上传失败后的回调函数
uploadSuccess: null,
uploadDomain: '',
// 组装视频等待时间
assbTime: 15000,
// 组装视频的拼接参数
assbParams: 'avinfo',
// 组装失败的回调
assbError: null,
// 组装成功的回调
assbSuccess: null,
// 获取token的url
tokenUrl: '',
// 获取token 的请求参数
tokenParams: null,
// 获取token 的请求type
tokenType: null,
// 获取token 之前的回调
tokenBefore: null,
// 获取token 失败的回调
tokenError: null,
// 获取token 成功的回调
tokenSuccess: null,
// 获取视频信息的url，
getVideoUrl: '',
// 获取视频具体信息的接口类型
getVideoType: '',
// 获取视频具体信息的header
getVideoHeaders: {},
// 获取视频具体信息的参数
getVideoParams: null,
// 获取视频具体信息成功的回调
getVideoSuccess: null,
// 获取视频具体信息失败的回调
getVideoError: null,
// 是否需要视频素材库
videoLibrary: true,
// 视频素材库请求url (需配置imgLibrary 为true)
videoLibraryUrl: '',
// 视频素材库上传请求参数
videoLibraryParams: null,
// 视频素材库自定义上传header
videoLibraryHeaders: null,
// 视频素材库请求type
videoLibraryType: null,
// 视频素材库请求失败回调
videoLibraryError: null,
// 视频素材库请求成功回调
videoLibrarySuccess: null
}
上传视频执行步骤：
1 根据 token相关参数，获取到token
2 根据七牛相关配置 与获取到的token 上传至七牛云
3 上传之后，会在指定的时间组装视频
4 指定时间内，若组装完成，则将获取到的视频信息，如长宽时长等 传回给服务器
根据上述流程：
- token 相关配置
tokenUrl ：（获取token的url）
tokenParams ：（获取token 的请求参数）若无则将uploadParams 作为默认参数
tokenType ：（获取token 的请求type） 若无，则按照uploadType 作为默认参数
tokenBefore ： 默认值null 请参照uploadImg 中的uploadBefore
tokenError ： 默认值null 请参照uploadImg 中的uploadError
tokenSuccess ： 默认值null 请参照uploadImg 中的uploadSuccess - 上传七牛云相关参数 (qiniuConfig 为七牛的配置 ，不再这里描述)
uploadParams :
uploadBefore :默认值null 请参照uploadImg 中的uploadBefore
uploadError :默认值null 请参照uploadImg 中的uploadError
uploadSuccess : 默认值null 请参照uploadImg 中的uploadSuccess
uploadDomain： 默认值为‘’ 组装过程中请求地址
-
uploadProgress :
- 默认值null
- 上传中的回调函数
- 可根据各组不同情况，定制不同的上传信息
- 参数 1.上传中的具体数据， 2.上传百分比， 3.显示上传信息的loading元素， 4.editor 对象
- 组装相关配置
-
assbTime
- 默认值： 15000 （ms）
- 组装视频等待时间
- Q： 为什么要有组装时间呢？
- A： 因为视频上传至七牛，是分片上传需要拼接， 拼接后还需要转码加水印，都要耗时
- Q： 那为什么这个时间不能确定呢？
- A： 因为这是要看你上传的视频有多大， 视频越大耗时越长，这个是无法确定的。
-
assbParams
- 默认值： ‘avinfo’
- 注意： 这里是请求视频，看是否已经组装完成，无需参数
- 这里的参数只是用来拼接 -
assbError
- 组装失败回调
- 参数： 1.失败数据 2. 获取视频信息的参数 3.editor 对象
- 用户可以根据不同情况来设置获取视频信息的参数
- 这里必须return 回来，不然params 会是undefined, 获取信息的参数会被制空。 -
assbSuccess
- 组装成功的回调
- 参数： 1.上传成功后的数据 2. 获取视频信息的参数 3.editor 对象
- 用户可以根据不同情况来设置获取视频信息的参数
- 这里必须return 回来，不然params 会是undefined, 获取信息的参数会被制空。
- 获取视频参数的相关配置
getVideoUrl ： 获取视频信息的url
getVideoType: 获取视频具体信息的接口类型 ,若无设置，默认按照uploadType
getVideoHeaders ： 获取视频具体信息的header
getVideoSuccess ：默认值null 请参照uploadImg 中的uploadSuccess
getVideoError ： 默认值null 请参照uploadImg 中的uploadError
-
getVideoParams
- 获取视频具体信息的参数
- 这里设置成什么 assbError 以及assbSuccess 的第二个参数就返回什么
其余字段请参照上传图片配置
uploadWord
用户自定义上传word相关默认参数
//word文档相关默认参数
editor.config.uploadWord = {
// 上传word最大size(MB)
uploadMaxSize: 5,
uploadType: 'POST',
// 上传word的url
uploadUrl: '',
uploadTips: '提示：若文档中存在编辑器所不支持的文本样式（例如表格等），将以纯文本展示。文档大小不超过5MB,使用频次为60s。建议检查、确认无误后使用。',
// 上传时的参数
uploadParams: {},
// 自定义上传header
uploadHeaders: {},
// 上传前的回调函数。
uploadBefore: null,
// 上传失败后的回调函数
uploadError: null,
// 上传成功后的回调函数
uploadSuccess: null,
};
字段详细说明请参照上传图片
emotionsConf
表情相关请求配置
editor.config.emotionsConf = {
success: null,
error: null,
params: {},
type: 'post'
};
注意： 这里是表情请求的相关配置，如需在表情请求成功，失败后调用，或者更改请求表情的参数，请配置，否则不需配置
表情字段请参照 1.0.x版本
图文分离
editor.config.uploadImg = {
imgTxtSeparation: true
uploadSuccess: ({ responseData }) => {
let flag
let $el = $('#editor-pic-area')
responseData.forEach(v => $el.find('li').length < 9 ? $el.append(`<li><img src="${v.url}" width="80"
height="80" /><b>X</b></li>`) : (flag = true))
if (flag) {
$el.find('p').fadeIn(500)
setTimeout(() => $el.find('p').fadeOut(500), 1000)
}
}
}
uploadImg.imgTxtSeparation 控制是否为图文分离，如果值为true， 那么将不会在编辑器内部添加图片， 会将图片链接全部暴露至
uploadImg.uploadSuccess 这个回调函数中。 可自主选择渲染盒子。
开发插件（以vue为例）编辑器升级为1.1.18
// custom.js
import syEditor from "sy-editor";
const createElement = tag => document.createElement(tag)
const appendChild = (parent, child) => parent.appendChild(child)
const addEventListener = (parent, type, listener) => parent.addEventListener(type, listener)
// 用 createMenu 方法创建菜单
syEditor.createMenu(function (check) {
// 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
let menuId = 'customInfo';
// check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
if (!check(menuId)) return;
// this 指向 editor 对象自身
let editor = this;
// 创建 menu 对象
let menu = new syEditor.Menu({
editor, // 编辑器对象
id: menuId, // 菜单id
title: '测试', // 菜单标题
// 正常状态和选中装下的dom对象，样式需要自定义
$domNormal: '<a href="#" tabindex="-1"><i class="el-icon-sy-chart-jicheng"></i></a>',
$domSelected: '<a href="#" tabindex="-1" class="selected"><i class="el-icon-sy-chart-jicheng"></i></a>'
});
let $container = createElement('div');
$container.className = "custom-info";
$container.innerHTML = '<header class="ph-dialog-header"> <h2 class="ph-title">选择日记本</h2> </header> <main class="ph-dialog-main"> </main>'
menu.dropPanel = new syEditor.Modal(editor, menu, {
$content: $container
});
// 判断用户是否配置了上传图片
editor.ready(function () {
// let form = document.querySelector('#batch-msg-form');
// addEventListener(form, 'submit', ()=>{ console.log(123)})
});
// 增加到editor对象中
editor.menus[menuId] = menu;
});
export default syEditor
// 编辑器组件 index.vue
import syEditor from "./custom";
config.menus = [ ... , "customInfo"] // 引入上面自定义的插件即可
效果图：
image.png
image.png
