@xiaowang10gg/xccjh-ckeditor5-video-file-upload
Version:
ckeditor5 support local video fileUpload,image/video oss direct upload
277 lines (268 loc) • 9.38 kB
HTML
<html lang="en" dir="ltr"></html>
<head>
<title>CKEditor 5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="editor"></div>
<input type="file"/>
<script src="../build/ckeditor.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
<!--<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>-->
<script>
// const input = document.querySelector('input');
// Rx.Observable.fromEvent(input, 'change').subscribe((e) => {
// const formData = new FormData();
// formData.append("file", e.target.files[0]);
// const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData);
// test.subscribe((res) => {
// console.log(res);
// }, error => {
// console.log(error);
// },
// () => {
// })
// });
//
function aj(url, type = "POST", dataType = "json", data) {
// return Rx.Observable.fromPromise(
return $.ajax({
url,
dataType,
type,
async: false,
data,
processData: false, // 使数据不做处理
contentType: false, // 不要设置Content-Type请求头
})
// );
}
//
// function getObservable() {
// return new Rx.Observable((observe) => {
// observe.next('1111');
// });
// }
//
// function getNextObservable() {
// return new Rx.Observable((nextObserve) => {
// getObservable().subscribe((data) => {
// nextObserve.next(data)
// });
// })
// }
//
// getNextObservable().subscribe((res) => {
// console.log(res);
// })
ClassicEditor.create(document.querySelector('.editor'), {
videoUpload: (file) => {
// return new Rx.Observable((nextObserve) => {
const formData = new FormData();
return new Promise((resolve, reject) => {
formData.append("file", file);
const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData).then(res=>{
resolve({url:'http://127.0.0.1:8080/'+res.url})
});
})
// test.subscribe((res) => {
// nextObserve.next({url: "http://127.0.0.1:8080/" + res.url});
// }, error => {
// nextObserve.error(res)
// },
// () => {
// })
// });
/* return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append("file", file);
const test = aj("http://127.0.0.1:8081/upload", "POST", "json", formData);
test.subscribe((res) => {
resolve({url: "http://127.0.0.1:8081/" + res.url});
}, error => {
reject(res)
})
});*/
},
imageUpload: (file) => {
// return new Rx.Observable((nextObserve) => {
// const formData = new FormData();
// formData.append("file", file);
// const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData);
// test.subscribe((res) => {
// nextObserve.next({url: "http://127.0.0.1:8080/" + res.url});
// }, error => {
// nextObserve.error(res)
// },
// () => {
// })
// });
// return new Promise((resolve, reject) => {
// const formData = new FormData();
// formData.append("file", file);
// const test = aj("http://127.0.0.1:8081/upload", "POST", "json", formData);
// test.subscribe((res) => {
// resolve({url: "http://127.0.0.1:8081/" + res.url});
// }, error => {
// reject(res)
// }
// )
// });
const formData = new FormData();
return new Promise((resolve, reject) => {
formData.append("file", file);
const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData).then(res=>{
resolve({url:'http://127.0.0.1:8080/'+res.url})
});
})
},
mediaEmbed: {
extraProviders: [
{
name: 'zdy',
url: [
/(.*?)/,
],
html: match => {
const src = match.input;
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;pointer-events: auto;">' +
'<video controls style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" src="' + src + '">' +
'</video>' +
'</div>'
);
}
},
]
},
heading: {
options: [
{model: 'paragraph', title: '正文', class: 'ck-heading_paragraph'},
{
model: 'heading1',
view: 'h1',
title: '标题1',
class: 'ck-heading_heading1',
},
{
model: 'heading2',
view: 'h2',
title: '标题2',
class: 'ck-heading_heading2',
},
{
model: 'heading3',
view: 'h3',
title: '标题3',
class: 'ck-heading_heading3',
},
{
model: 'heading4',
view: 'h4',
title: '标题4',
class: 'ck-heading_heading4',
},
],
},
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'underline',
'fontBackgroundColor',
'fontColor',
'fontSize',
'fontFamily',
'link',
'insertTable',
'imageUpload',
'mediaEmbed',
// 'CKFinder',
'bulletedList',
'numberedList',
'removeFormat',
'|',
'alignment',
'indent',
'outdent',
'|',
'blockQuote',
'undo',
'redo',
'code',
'codeBlock',
'highlight',
'exportPdf',
'specialCharacters',
'horizontalLine',
'MathType',
'ChemType',
'strikethrough',
'subscript',
'superscript',
'todoList',
'restrictedEditingException',
]
},
alignment: {
options: ['left', 'center', 'right', 'justify'],
},
language: 'zh-cn',
image: {
toolbar: [
'imageTextAlternative',
'|',
'imageStyle:alignLeft',
'imageStyle:full',
'imageStyle:alignRight',
],
resizeUnit: 'px',
types: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff'],
styles: ['full', 'alignLeft', 'alignRight'],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties',
],
},
tableProperties: {
// ...
},
tableCellProperties: {
// ...
},
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif',
],
},
licenseKey: '',
})
.then(editor => {
window.editor = editor;
})
.catch(error => {
console.error('Oops, something gone wrong!');
console.error('Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:');
console.warn('Build id: ihdq7ghnnkyb-t8ajmnkqisva');
console.error(error);
});
</script>
</body>