tongChong
/
wangEditor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #2781 from wangeditor-team/fix-insert-check 

fix: 插入图片和视频去掉校验，全部使用开发者自定义校验
This commit is contained in:
王福朋 2021-01-14 20:43:51 +08:00 committed by GitHub
parent ff5673903b 9e2f14ab1c
commit 88d8f57e7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 14 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/video-callback.html
View File

@ -29,10 +29,10 @@
// 测试如果输入'测试'，返回false，停止插入
editor.config.onlineVideoCheck = function (video) {
if (video === '测试') {
return '测试禁止插入';
return '测试禁止插入'
}
return true;
return true
}
editor.config.onlineVideoCallback = function (video) {

4
src/config/image.ts
View File

@ -25,6 +25,10 @@ export type UploadImageHooksType = {
}
export default {
// 网络图片校验的配置函数
linkImgCheck: function (src: string): string | boolean {
return true
},
// 显示“插入网络图片”
showLinkImg: true,

6
src/config/index.ts
View File

@ -124,12 +124,6 @@ const defaultConfig = Object.assign(
linkCheck: function (text: string, link: string): string | boolean {
return true
},
},
//网络图片校验的配置函数
{
linkImgCheck: function (src: string): string | boolean {
return true
},
}
)

25
src/menus/img/create-panel-conf.ts
View File

@ -8,7 +8,6 @@ import { PanelConf, PanelTabConf } from '../menu-constructors/Panel'
import { getRandom } from '../../utils/util'
import $ from '../../utils/dom-core'
import UploadImg from './upload-img'
import { imgRegex } from '../../utils/const'
export default function (editor: Editor): PanelConf {
const config = editor.config
@ -30,29 +29,11 @@ export default function (editor: Editor): PanelConf {
* @param linkImg 网络图片链接
*/
function checkLinkImg(src: string): boolean {
//编辑器进行正常校验，图片合规则使指针为true，不合规为false
let flag = true
if (!imgRegex.test(src)) {
flag = false
}
//查看开发者自定义配置的返回值
const check = config.linkImgCheck(src)
if (check === undefined) {
//用户未能通过开发者的校验，且开发者不希望编辑器提示用户
if (flag === false) console.log(t('您刚才插入的图片链接未通过编辑器校验', 'validate.'))
} else if (check === true) {
//用户通过了开发者的校验
if (flag === false) {
config.customAlert(
`${t('您插入的网络图片无法识别', 'validate.')}，${t(
'请替换为支持的图片类型',
'validate.'
)}：jpg | png | gif ...`,
'warning'
)
} else return true
} else {
if (check === true) {
return true
} else if (typeof check === 'string') {
//用户未能通过开发者的校验，开发者希望我们提示这一字符串
config.customAlert(check, 'error')
}

31
src/menus/video/create-panel-conf.ts
View File

@ -8,7 +8,6 @@ import { PanelConf, PanelTabConf } from '../menu-constructors/Panel'
import { getRandom } from '../../utils/util'
import $ from '../../utils/dom-core'
import UploadVideo from './upload-video'
import { videoRegex } from '../../utils/const'
export default function (editor: Editor, video: string): PanelConf {
const config = editor.config
@ -17,12 +16,8 @@ export default function (editor: Editor, video: string): PanelConf {
// panel 中需要用到的id
const inputIFrameId = getRandom('input-iframe')
const btnOkId = getRandom('btn-ok')
const i18nPrefix = 'menus.panelMenus.video.'
const inputUploadId = getRandom('input-upload')
const btnStartId = getRandom('btn-local-ok')
const t = (text: string, prefix: string = i18nPrefix): string => {
return editor.i18next.t(prefix + text)
}
/**
* 插入链接
@ -40,30 +35,12 @@ export default function (editor: Editor, video: string): PanelConf {
* @param video 在线视频链接
*/
function checkOnlineVideo(video: string): boolean {
// 编辑器进行正常校验，video 合规则使指针为true，不合规为false
let flag = true
if (!videoRegex.test(video)) {
flag = false
}
// 查看开发者自定义配置的返回值
const check = editor.config.onlineVideoCheck(video)
if (check === undefined) {
if (flag === false) console.log(t('您刚才插入的视频链接未通过编辑器校验', 'validate.'))
} else if (check === true) {
// 用户通过了开发者的校验
if (flag === false) {
editor.config.customAlert(
`${t('您插入的网络视频无法识别', 'validate.')}，${t(
'请替换为正确的网络视频格式',
'validate.'
)}：如<iframe src=...></iframe>`,
'warning'
)
} else {
return true
}
} else {
if (check === true) {
return true
}
if (typeof check === 'string') {
//用户未能通过开发者的校验，开发者希望我们提示这一字符串
editor.config.customAlert(check, 'error')
}

5
src/utils/const.ts
View File

@ -4,11 +4,6 @@
*/
export function EMPTY_FN() {}
//用于校验图片链接是否符合规范
export const imgRegex = /\.(gif|jpg|jpeg|png)$/i
//用于校验是否为url格式字符串
export const urlRegex = /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&amp;:/~+#]*[\w\-@?^=%&amp;/~+#])?/
//用于校验在线视频是否符合规范
export const videoRegex = /((<iframe|video|embed|object)\s+[\s\S]*<\/(iframe|video|embed|object))>|<(iframe|video|embed|object)\s+[\s\S]*\/?>/

5
test/unit/menus/video.test.ts
View File

@ -70,12 +70,10 @@ test('video onlineVideoCheck 自定义检查', () => {
videoMenu.clickHandler()
editor.config.onlineVideoCheck = function (video: string) {
if (video === '测试') {
return '测试禁止插入'
return false
}
return true
}
const fn3 = jest.fn()
editor.config.customAlert = fn3
const panel = videoMenu.panel as Panel
const panelElem = panel.$container.elems[0]
@ -91,7 +89,6 @@ test('video onlineVideoCheck 自定义检查', () => {
$videoIFrame.val(video)
$btnInsert.click()
expect(fn3).toBeCalled()
expect(editor.$textElem.html().indexOf(video)).toBe(-1)
})