CKEditor 5上传图片代码整合 –
<html lang="zh-cn"> <head> <meta charset="utf-8"> <title>修改 </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="renderer" content="webkit"> <link rel="shortcut icon" href="/assets/img/favicon.ico"> <link href="/assets/css.css" rel="stylesheet"> <link href='/static/css/xxx.css' rel='stylesheet' type='text/css' /> <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. --> <!--[if lt IE 9]> <script src="/assets/js/html5shiv.js"></script> <script src="/assets/js/respond.min.js"></script> <![endif]--> <style> .ck-editor__editable { min-height: 100px; } </style> </head> <body class="inside-header inside-aside is-dialog"> <div id="main" role="main"> <div class="content" style="padding-top: 18px;padding-left:80px;padding-right: 80px;"> <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="/article/edit/"> <div class="form-group"> <label for="c-qrcode_id" class="control-label col-xs-12 col-sm-2">标题:</label> <div class="col-xs-12 col-sm-4"> <input class="form-control" name="row[title]" id="title" value=""> </div> <label for="c-qrcode_id" class="control-label col-xs-12 col-sm-1">排序值:</label> <div class="col-xs-4 col-sm-2"> <input class="form-control" name="row[sortrank]" id="title" value=""> </div> </div> <div class="form-group"> <label for="c-status" class="control-label col-xs-12 col-sm-1">状态:</label> <div class="radio col-xs-12 col-sm-2"> <label for="row[status]-inprogress"> <input id="row[status]-inprogress" name="row[status]" type="radio" value="1"/> 正常</label> <label for="row[status]-expired"> <input id="row[status]-expired" name="row[status]" type="radio" value="0"/> 禁用</label> </div> </div> <div class="form-group"> <div id="mdeditor"> <textarea name="content" id="content" style="width:80%;"></textarea> </div> </div> <div class=""> <label for="description" class="">描述:</label> <div class=""> <textarea name="row[description]" class="form-control" rows="5" id="description"></textarea> </div> </div> <div class="form-group" style="text-align:center;"> <button type="submit" class="btn btn-success btn-embossed"> 提交 </button> </div> </form> </div> </div> </body> <script type="text/javascript" src="/static/js/jquery.js"></script> <script type="text/javascript" src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script> <script type="text/javascript" src="/static/js/layer/layer.js"></script> <script type="text/javascript" src="/static/js/jquery.form.js"></script> <script type="text/javascript"> //初始化编辑器 ClassicEditor.create(document.querySelector('#content'), { //removePlugins: ['MediaEmbed'], //除去视频按钮 language: 'zh-cn', // 中文 ckfinder: { uploadUrl: "/api/uploader/ckeditor5" } }).then(editor => { //const toolbarContainer = document.querySelector('#toolbar-container') //toolbarContainer.appendChild(editor.ui.view.toolbar.element) // 加载了适配器 //editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { // return new MyUploadAdapter(loader) //} this.editor = editor // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作 }).catch(error => { console.error('error') }) class MyUploadAdapter { constructor(loader) { this.loader = loader; } upload() { return new Promise((resolve, reject) => { const data = new FormData(); let size = this.loader.file.size; console.error(size); console.log(this.loader.file); data.append('imgfile', this.loader.file); data.append('allowSize', 10);//允许图片上传的大小/兆 $.ajax({ url: '/upload-url/ckeditor5', type: 'POST', data: data, dataType: 'json', processData: false, contentType: false, success: function (data) { if (data.res) { resolve({ default: data.url }); } else { reject(data.msg); } } }); }); } abort() { } } </script> </html> 原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/264034.html