程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

在vue中使用ckeditor富文本,实现上传本地图片

发布于2021-11-20 17:24     阅读(1331)     评论(0)     点赞(17)     收藏(5)


哦,俺使的是ckeditor4-vue,应该差不多吧,记录一下吧,有同样用这个插件的大佬也可以跟着一起研究一下(废话不多说)

  • 下载安装ckeditor4-vue
  • npm i ckeditor4-vue@1.0.1或者"ckeditor4-vue": "^1.0.1",将这个代码放到package.json中,然后npm i
  • 想要实现本地图片,最重要的就是(反正我这最重要)"ajax-hook": "^2.0.3",安装这个玩意
至于ckeditor的使用

在main.js中:

import CKEditor from 'ckeditor4-vue';

然后就引用就可以直接用了,没有去搞plugins

在需要使用的页面调用

// css:
<ckeditor class="ckeditor" v-model="editortxt" :config='config'></ckeditor>
// editortxt是绑定的,不必解释


// config配置项,具体看官网,展示一下我的吧


data:{
	return{
		editortxt:'',
		api:url,
	 	config: {
	        height: 200,
	        // 富文本功能项
	        extraPlugins: 'colorbutton, colordialog, font, indent, justify, showblocks, image2, uploadimage',
	        // 本地图片上传(ckeditor官网有解释)
	        filebrowserImageUploadUrl: '',
	        filebrowserUploadUrl: ''
      },
	}
}
关键来了

// 先引入proxy
import {proxy, unProxy} from 'ajax-hook'

mounted(){
	unProxy()
    proxy({
      // 请求发起前进入
      onRequest: (config, handler) => {
       // console.log(config)
        handler.next(config)
      },
      // 请求发生错误时进入,比如超时;注意,不包括http状态码错误,如404仍然会认为请求成功
      onError: (err, handler) => {
        handler.next(err)
      },
      // 请求成功后进入
      onResponse: (response, handler) => {
       // console.log(response);
        if (response.config.url === 'http://192.168.2.71:6218/ocean-ranch/rest/files/rich-files') {
          response.response = JSON.parse(response.response)
          
          // console.log('url');
          response.response = JSON.stringify({
            fileName: response.response.result.fileName,
            uploaded: 1,
            // 拼接后台穿给的文件路径,至于文件路径,一会给你们贴图展示一下,baseUrl 就是ip+端口号
            url: baseUrl + response.response.result.filePath
          })
         //**// console.log(response.response,'response.response');
        }
        handler.next(response)
      }
    })
}
要不要解释一下啊,我怕我解释不明白

// 本地图片上传(ckeditor官网有解释) filebrowserImageUploadUrl: '', filebrowserUploadUrl: ''

这两行如果不添加的话,给你们上图看一下吧

在这里插入图片描述
没有本地上传的按钮,如果添加这两行的话:

在这里插入图片描述
需要先上传图片,然后点击上传服务器,此刻proxy的作用就是拦截你的请求,然后你需要做的就是将后台返回的文件路径拼接成一个完整的url

写一写plugins的方法吧,如果想直接生成plugins文件夹以及文件,直接使用vue add ckeditor4-vue具体使用方法参考百度(其实没啥屁用,就是改变一下目录的结构)

// 在src文件夹下面创建ckeditor.js
// 在ckeditor.js中:
import Vue from 'vue'
import CKEditor from 'ckeditor4-vue/dist/legacy.js'

Vue.use(CKEditor)

然后在main.js中

import './plugins/CKEditor.js'

在这里插入图片描述

原文链接:https://blog.csdn.net/Wehter/article/details/121407487




所属网站分类: 技术文章 > 博客

作者:哦八戒八戒

链接:http://www.qianduanheidong.com/blog/article/237562/a6b34583d430d816545a/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

17 0
收藏该文
已收藏

评论内容:(最多支持255个字符)