vue项目集成富文本编辑器CKEditor4

最新推荐文章于 2024-06-26 11:28:19 发布

this指向谁

最新推荐文章于 2024-06-26 11:28:19 发布

阅读量2.3k

点赞数 1

分类专栏： vue，js常见问题文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_43258005/article/details/104939998

版权

本文档介绍了如何在Vue项目中集成富文本编辑器CKEditor 4，包括从官网下载并放置文件、在index.html引入、配置组件、处理图片上传路径及组件使用等步骤，适合初学者参考。

摘要由CSDN通过智能技术生成

1. 官网下载CKEditor 4，将解压的ckeditor文件夹整体放在项目的public下
ckeditor官网

2.在Vue的index.html中引入CKEditor4

<script src="ckeditor/ckeditor.js"></script>

3.在components下新建ckeditor.vue文件，并在其中配置上出图片的路径

<template>
  <div>
    <textarea :id="id"></textarea>
  </div>
</template>
<script>
import httpConfig from '../config/http';
let {
     kpaasApiHost } = httpConfig;
import sysConfig from '../config/system';

export default {
   
  name: "ckeditor4",
  props: ["value"],
  mounted: function() {
   
    const self = this;
  // 渲染编辑器，配置上传图片的路径 上传图片改为了自己的接口
　　// self.ckeditor = window.CKEDITOR.replace(self.id);
    self.ckeditor = window.CKEDITOR.replace(self.id,{
   filebrowserImageUploadUrl:  kpaa