CKEditor图片上传实现详细步骤(使用Struts 2)

http://blog.csdn.net/mydwr/article/details/8669594



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要安装 `@ckeditor/ckeditor5-vue2` 和 `@ckeditor/ckeditor5-build-classic` 两个依赖包。 ``` npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic ``` 然后在你的 Vue 组件中引入 CKEditor 组件: ```vue <template> <div> <ckeditor :editor="editor" v-model="content" :config="editorConfig"></ckeditor> </div> </template> <script> import ClassicEditor from '@ckeditor/ckeditor5-build-classic' import CKEditor from '@ckeditor/ckeditor5-vue2' export default { components: { ckeditor: CKEditor.component }, data() { return { content: '', editorConfig: { // 配置项 }, editor: ClassicEditor } } } </script> ``` 在上面的代码中,我们引入了 `ClassicEditor`,它是一个预先配置好的编辑器,包含了常用的插件,如加粗、斜体、链接等。我们也可以自定义 `editorConfig`,来配置编辑器。 下面是一个常用的配置项示例: ```js editorConfig: { toolbar: { items: [ 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', '|', 'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo' ] }, image: { toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side', '|', 'imageResize', '|', 'imageUpload', 'imageUpload', 'imageUpload', 'imageUpload' ], styles: [ 'full', 'side' ] }, language: 'zh-cn', table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties' ] }, licenseKey: '', simpleUpload: { uploadUrl: '/your/upload/url', headers: { 'X-CSRF-TOKEN': 'CSRF-Token' } } } ``` 上面的配置中,我们开启了图片上传功能,并且添加了表格插入、图片上传、撤销、重做等常用功能。同时也设置了语言为中文。 如果需要添加额外的插件,可以使用 `@ckeditor/ckeditor5-*` 的包名,比如添加字数统计插件: ``` npm install --save @ckeditor/ckeditor5-word-count ``` 然后在 `editorConfig` 中添加: ```js import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount'; editorConfig: { plugins: [WordCount], toolbar: [ 'wordCount' ] } ``` 这样就可以在编辑器中添加字数统计功能了。 我们也可以自定义上传图片的方法,需要在配置项中添加 `simpleUpload` 选项: ```js editorConfig: { simpleUpload: { uploadUrl: '/your/upload/url', headers: { 'X-CSRF-TOKEN': 'CSRF-Token' }, // 自定义上传方法 async upload(file) { // 这里写上传逻辑 const formData = new FormData(); formData.append('file', file); const response = await axios.post('/your/upload/url', formData, { headers: { 'Content-Type': 'multipart/form-data', 'X-CSRF-TOKEN': 'CSRF-Token' } }); return { default: response.data.url }; } } } ``` 在上面的代码中,我们使用了 axios 发送了一个 `multipart/form-data` 的请求,然后返回上传的图片地址。 希望以上内容能够帮到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值