angularjs - 在 CkEditor 中获取选定的文件并添加自定义上传按钮
问题描述
- 我在角度 5 中使用 ngx-ckeditor: "0.4.0"。
- 我要上传图片并添加自定义上传按钮
下面是我的html。
<ck-editor #ckeditor name="html_template" [(ngModel)]="mailModel.html_template" [config]="ckEditorConfig"> </ck-editor>
这是我的组件代码。
this.ckEditorConfig = { filebrowserBrowseUrl : '/application/crm/distribution-list/create-mail', filebrowserUploadUrl : 'http://192.168.0.107:8000/api/crm/v1.0/crm-distribution-library-files', fileTools_requestHeaders :{ 'X-Requested-With': 'XMLHttpRequest', Authorization: 'Bearer ' + localStorage.getItem('access_token') }, filebrowserUploadMethod : 'xhr', removeButtons: 'Forms,Iframe,Blocks,Subscript,Superscript,Maximize,Undo', };
使用此代码,我无法获取图像并且无法传递我的自定义标头。
我想获取选定的图像并添加自定义“上传图像”按钮。
解决方案
下面是在 CkEditor 中添加自定义按钮的代码
@ViewChild('ckeditor') ckeditor: CKEditorComponent;
ngAfterViewInit(): void {
this._addImageUploadBtn();
}
_addImageUploadBtn() {
const editor = this.ckeditor && this.ckeditor.instance;
if (!editor) {
return;
}
var that = this;
editor.ui.addButton('uploadImage', {
icon: 'https://img.icons8.com/ios/50/000000/image.png',
label: 'Upload Image',
command: 'uploadImage',
toolbar: 'insert'
});
editor.addCommand('uploadImage', {
exec: function(editor: any) {
// Remove img input.
[].slice.apply(document.querySelectorAll('.ck-editor-upload-img')).forEach((img: any) => {
img.remove();
});
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('class', 'ck-editor-upload-img');
input.style.display = 'none';
input.addEventListener('change', e => {
const file = (e.target as HTMLInputElement).files[0];
if (file) {
console.log(file);
// Do Stuff
}
},
false
);
document.body.appendChild(input);
input.click();
}
});
}
在这里,您可以获得选定的图像文件,并获得自定义按钮点击。
推荐阅读
- yaml - 无法创建事务块:无法在 configtxgen 中定义新通道
- javascript - Angular 2-5 - ngfor 没有包装在 div 容器中
- javascript - 在向下钻取的情况下堆叠条形图颜色(单击折线图打开)
- git - Git:让远程服务器从本地服务器拉取
- html - 我怎样才能让我的代码响应调整页面大小
- ios - RxSwift:如何在不创建类/结构属性的情况下为最后的网络响应创建缓存?
- reactjs - 如何在构建反应本机期间忽略文件夹
- scala - Scala sbt build 中的子模块未继承依赖项覆盖
- python - heapq.merge() 迭代器遍历的项比列表中的多
- android - 使用 SVG 转换为矢量到 imageview