vue后台管理系统富文本组件（二）kindeditor

最新推荐文章于 2024-03-16 09:30:27 发布
置顶 最新推荐文章于 2024-03-16 09:30:27 发布
阅读量1.5w 收藏 13
点赞数 1
分类专栏： vue element-ui vue 后台管理系统富文本组件 文章标签： kindeditor vue富文本组件kindeditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39953537/article/details/100043354
版权

vue后台管理系统富文本组件（二）kindeditor

简介

富文本组件作为后台管理系统的最重要的基础组件之一，好多公司还是习惯使用kindeditor。虽然他的界面比较老，但是相当稳定bug少。

主要依赖说明 （先安装，步骤略）

 {
    "axios": "^0.18.0",
    "element-ui": "2.11.1",  
    "vue": "^2.6.10",
    "kindeditor": "^4.1.10",
 }

github demo文章源码地址

正文

1.组件

文件目录
在这里插入图片描述

src/components/Kindeditor/index.vue


<template>
  <div class="margin-top-20">
    <textarea :id="id" name="content" v-model="outContent"></textarea>
    <input
      @change="selectedFile"
      style="visibility: hidden;height:0;"
      type="file"
      name
      id="inputFile"
    />
  </div>
</template>
<script>
import "kindeditor/themes/default/default.css";
import "kindeditor/kindeditor-all-min.js";
import "kindeditor/lang/zh-CN.js";

// 以下四个配置文件见下文

import items from "./config/items";
import htmlTags from "./config/htmlTags";
import fontSizeTable from "./config/fontSizeTable";
import otherConfig from "./config/otherConfig";

export default {
  name: "kindeditor-component",
  props: {
    // 编辑器内容 url
    html: {
      type: String,
      default: ""
    },
    // 编辑器内容
    content: {
      type: String,
      default: ""
    },
    // 编辑器id
    id: {
      type: String,
      // required: true,
      default: "kindeditor-id"
    },
    // 宽
    width: {
      type: String,
      default: `100%`
    },
    // 高
    height: {
      type: String,
      default: "400"
    },
    // 最小宽
    minWidth: {
      type: Number,
      default: 650
    },
    // 最小高
    minHeight: {
      type: Number,
      default: 400
    },
    // toolbar 工具栏配置
    items: {
      type: Array,
      default: function() {
        return [...items];
      }
    },
    // 标签配置
    htmlTags: {
      type: Object,
      default: function() {
        return { ...htmlTags };
      }
    },
    //字号配置
    fontSizeTable: {
      type: Array,
      default: function() {
        return [...fontSizeTable];
      }
    },
    // 语言配置
    langType: {
      type: String,
      default: "zh-CN"
    },
    // 主题配置
    themeType: {
      type: String,
      default: "default"
    },
    // body 的样式
    bodyClass: {
      type: String,
      default: "ke-content"
    },
    // 其他配置项
    ...otherConfig
  },
  data() {
    return {
      editor: null,
      outContent: this.content
    };
  },

  watch: {
    content(val) {
      this.editor && val !== this.outContent && this.editor.html(val);
    },
    // 分发编辑器内容改变事件
    outContent(val) {
      this.$emit("update:content", val);
      this.$emit("on-content-change", val);
      this.$emit("input", val);
    },
    // 初始化编辑器内容
    html(val) {
      if (
        this.html &&
        (this.html.startsWith("https://") || this.html.startsWith("http://"))
      ) {
        this.loadUrl(val);
      } else {
        this.outContent = "";
        this.outContent ? this.editor.appendHtml(this.outContent) : "";
      }
    }
  },
  created() {
    if (
      this.html &&
      (this.html.startsWith("https://") || this.html.startsWith("http://"))
    ) {
      this.loadUrl(this.html);
    } else {
      this.outContent = "";
      setTimeout(() => {
        this.outContent ? this.editor.appendHtml(this.outContent) : "";
      }, 1000);
    }
  },
  mounted() {
    // 初始访问时创建
    this.initEditor();
    //  添加焦点
    // this.editor.focus();
    // 添加点击图片回调函数
    this.editor.clickToolbar("image", () => {
      // 禁用自带的图片弹窗
      this.editor.hideDialog();
      // 打开文件
      this.handleOpenFile();
    });
  },
  activated() {
    // keep-alive 进入时创建
    this.initEditor();
  },
  deactivated() {
    // keep-alive 离开时移除
    this.removeEditor();
  },
  beforeDestroy() {
    // 实例销毁之前移除
    this.removeEditor();
  },
  methods: {
    // 打开文件
    handleOpenFile() {
      let input = document.getElementById("inputFile");
      // 解决同一个文件不能监听的问题
      input.addEventListener(
        "click",
        function() {
          this.value = "";
        },
        false
      );
      // 点击input
      input.click();
    },
    // 选择好文件
  async  selectedFile($event) {
      const file = $event.target.files[0];

    // 把图片上传到后端服务器 拿到url  uploadImage 是自己后端上传图片的接口
    // 调用appendHtml方法把图片追加到富文本

    // const url= await  uploadImage (file)
    //   this.editor.appendHtml(
    //           `<img style="max-width:100%;" src="https://${data.Location}">`
    //         ); 
    },
    // 编辑器内容上传到cos，调用返回url
    async content2Url() {
   // 把html片段上传到后端服务器 拿到url  uploadHtml 是自己后端上传的接口
    //   try {
    //     const res = await uploadHtml(this.outContent)
    //     return res
    //   } catch (error) {
    //     this.$message({
    //       message: error.data.message,
    //       type: 'error'
    //     })
    //   }
    }
    // 加载html填充编辑器内容
    loadUrl(url) {
      if (url && url.length > 0) {
        axios.get(url)
          .then(response => {
            // 处理HTML显示
            this.outContent = response.data;
            this.editor.appendHtml(this.outContent);
            this.$emit("subLoadUrlToHtml", response.data);
          })
          .catch(() => {
            this.outContent = "服务器数据加载失败，请重试!";
            this.editor.appendHtml(this.outContent);
          });
      }
    },
    // 移除编辑器实例
    removeEditor() {
      window.KindEditor.remove(`#${this.id}`);
    },
    // 初始化编辑器
    initEditor() {
      this.removeEditor();
      this.editor = window.KindEditor.create("#" + this.id, {
        width: this.width,
        height: this.height,
        minWidth: this.minWidth,
        minHeight: this.minHeight,
        items: this.items,
        noDisableItems: this.noDisableItems,
        filterMode: this.filterMode,
        htmlTags: this.htmlTags,
        wellFormatMode: this.wellFormatMode,
        resizeType: this.resizeType,
        themeType: this.themeType,
        langType: this.langType,
        designMode: this.designMode,
        fullscreenMode: this.fullscreenMode,
        basePath: this.basePath,
        themesPath: this.themesPath,
        pluginsPath: this.pluginsPath,
        langPath: this.langPath,
        minChangeSize: this.minChangeSize,
        loadStyleMode: this.loadStyleMode,
        urlType: this.urlType,
        newlineTag: this.newlineTag,
        pasteType: this.pasteType,
        dialogAlignType: this.dialogAlignType,
        shadowMode: this.shadowMode,
        zIndex: this.zIndex,
        useContextmenu: this.useContextmenu,
        syncType: this.syncType,
        indentChar: this.indentChar,
        cssPath: this.cssPath,
        cssData: this.cssData,
        bodyClass: this.bodyClass,
        colorTable: this.colorTable,
        afterCreate: this.afterCreate,
        // 编辑器内容改变回调
        afterChange: () => {
          this.editor ? (this.outContent = this.editor.html()) : "";
        },
        afterTab: this.afterTab,
        afterFocus: this.afterFocus,
        afterBlur: this.afterBlur,
        afterUpload: this.afterUpload,
        uploadJson: this.uploadJson,
        fileManagerJson: this.fileManagerJson,
        allowPreviewEmoticons: this.allowPreviewEmoticons,
        allowImageUpload: this.allowImageUpload,
        allowFlashUpload: this.allowFlashUpload,
        allowMediaUpload: this.allowMediaUpload,
        allowFileUpload: this.allowFileUpload,
        allowFileManager: this.allowFileManager,
        fontSizeTable: this.fontSizeTable,
        imageTabIndex: this.imageTabIndex,
        formatUploadUrl: this.formatUploadUrl,
        fullscreenShortcut: this.fullscreenShortcut,
        extraFileUploadParams: this.extraFileUploadParams,
        filePostName: this.filePostName,
        fillDescAfterUploadImage: this.fillDescAfterUploadImage,
        afterSelectFile: this.afterSelectFile,
        pagebreakHtml: this.pagebreakHtml,
        allowImageRemote: this.allowImageRemote,
        autoHeightMode: this.autoHeightMode,
        fixToolBar: this.fixToolBar,
        tabIndex: this.tabIndex
      });
    }
  }
};
</script>

<style>
</style>

src/components/Kindeditor/config/items.js

// toolbar配置
const items = [
  // "source",
  // "|",
  "undo",
  "redo",
  "|",
  "preview",
  // "print",
  // "template",
  // "code",
  "cut",
  "copy",
  "paste",
  "plainpaste",
  "wordpaste",
  "|",
  "justifyleft",
  "justifycenter",
  "justifyright",
  "justifyfull",
  "insertorderedlist",
  "insertunorderedlist",
  "indent",
  "outdent",
  "subscript",
  "superscript",
  "clearhtml",
  "quickformat",
  // "selectall",
  "|",
  "fullscreen",
  "/",
  "formatblock",
  // "fontname",
  "fontsize",
  "|",
  "forecolor",
  "hilitecolor",
  "bold",
  "italic",
  "underline",
  "strikethrough",
  "lineheight",
  "removeformat",
  "|",
  "image",
  // "multiimage",
  // "flash",
  // "media",
  // "insertfile",
  // "table",
  "hr",
  // "emoticons",
  // "baidumap",
  "pagebreak",
  "anchor",
  "link",
  "unlink",
  "|",
  "about"
];

export default items;

src/components/Kindeditor/config/htmlTags.js

const htmlTags = {
  font: ["color", "size", "face", ".background-color"],
  span: ["style"],
  div: ["class", "align", "style"],
  table: [
    "class",
    "border",
    "cellspacing",
    "cellpadding",
    "width",
    "height",
    "align",
    "style"
  ],
  "td,th": [
    "class",
    "align",
    "valign",
    "width",
    "height",
    "colspan",
    "rowspan",
    "bgcolor",
    "style"
  ],
  a: ["class", "href", "target", "name", "style"],
  embed: [
    "src",
    "width",
    "height",
    "type",
    "loop",
    "autostart",
    "quality",
    "style",
    "align",
    "allowscriptaccess",
    "/"
  ],
  img: [
    "src",
    "width",
    "height",
    "border",
    "alt",
    "title",
    "align",
    "style",
    "/"
  ],
  hr: ["class", "/"],
  br: ["/"],
  "p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6": ["align", "style"],
  "tbody,tr,strong,b,sub,sup,em,i,u,strike": []
};

export default htmlTags;

src/components/Kindeditor/config/fontSizeTable.js

// 字体配置
const fontSizeTable = [
  "9px",
  "10px",
  "12px",
  "14px",
  "16px",
  "18px",
  "24px",
  "32px"
];
export default fontSizeTable;

src/components/Kindeditor/config/otherConfig.js

// 其他非主要配置项
const otherConfig = {
  noDisableItems: {
    type: Array,
    default: function() {
      return ["source", "fullscreen"];
    }
  },
  filterMode: {
    type: Boolean,
    default: true
  },

  wellFormatMode: {
    type: Boolean,
    default: true
  },
  resizeType: {
    type: Number,
    default: 2
  },

  designMode: {
    type: Boolean,
    default: true
  },
  fullscreenMode: {
    type: Boolean,
    default: false
  },
  basePath: {
    type: String
  },
  themesPath: {
    type: String
  },
  pluginsPath: {
    type: String,
    default: ""
  },
  langPath: {
    type: String
  },
  minChangeSize: {
    type: Number,
    default: 5
  },
  loadStyleMode: {
    type: Boolean,
    default: true
  },
  urlType: {
    type: String,
    default: ""
  },
  newlineTag: {
    type: String,
    default: "p"
  },
  pasteType: {
    type: Number,
    default: 2
  },
  dialogAlignType: {
    type: String,
    default: "page"
  },
  shadowMode: {
    type: Boolean,
    default: true
  },
  zIndex: {
    type: Number,
    default: 811213
  },
  useContextmenu: {
    type: Boolean,
    default: true
  },
  syncType: {
    type: String,
    default: "form"
  },
  indentChar: {
    type: String,
    default: "\t"
  },
  cssPath: {
    type: [String, Array]
  },
  cssData: {
    type: String
  },

  colorTable: {
    type: Array
  },
  afterCreate: {
    type: Function
  },

  afterTab: {
    type: Function
  },
  afterFocus: {
    type: Function
  },
  afterBlur: {
    type: Function
  },
  afterUpload: {
    type: Function
  },
  uploadJson: {
    type: String
  },
  fileManagerJson: {
    type: String
  },
  allowPreviewEmoticons: {
    type: Boolean,
    default: true
  },
  allowImageUpload: {
    type: Boolean,
    default: true
  },
  allowFlashUpload: {
    type: Boolean,
    default: true
  },
  allowMediaUpload: {
    type: Boolean,
    default: true
  },
  allowFileUpload: {
    type: Boolean,
    default: true
  },
  allowFileManager: {
    type: Boolean,
    default: false
  },

  imageTabIndex: {
    type: Number,
    default: 0
  },
  formatUploadUrl: {
    type: Boolean,
    default: true
  },
  fullscreenShortcut: {
    type: Boolean,
    default: false
  },
  extraFileUploadParams: {
    type: Object,
    default: function() {
      return {};
    }
  },
  filePostName: {
    type: String,
    default: "imgFile"
  },
  fillDescAfterUploadImage: {
    type: Boolean,
    default: false
  },
  afterSelectFile: {
    type: Function
  },
  pagebreakHtml: {
    type: String,
    default: '<hr style="page-break-after: always;" class="ke-pagebreak" />'
  },
  allowImageRemote: {
    type: Boolean,
    default: true
  },
  autoHeightMode: {
    type: Boolean,
    default: false
  },
  fixToolBar: {
    type: Boolean,
    default: false
  },
  tabIndex: {
    type: Number
  }
};

export default otherConfig;

2.使用


<template>
    <div>
          <Kind-editor  ref="kindeditor" :html="html" @input="getContent"></Kind-editor>
    </div>
</template>

<script>
import KindEditor from "@/components/Kindeditor";
export default {
  name: 'GoodsForm',
  components: {
    KindEditor
  },
  data() {
    return {
      html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
      content:''
    }
  },
  methods: {
      // 获取编辑器内容
    getContent(content) {
      this.content = content
    },
    // 编辑器内容转换成在线url
    async getcontent2Url() {
      try {
        const htmlUrl =  await this.$refs.kindeditor.content2Url()
        return htmlUrl
      } catch (error) {
        console.log(error)
      }
    }

  }
}
</script>

3.使用效果

在这里插入图片描述
参考链接
1.kindeditor官方文档

xiaofei0627
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
专栏目录
vue集成kindeditor富文本的实现示例代码
10-16
主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue中使用kindeditor编辑器_vue集成kindeditor富文本
weixin_30174223的博客
12-30 963
指令该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行Vue.directive('loaded-callback', {inserted: function (el, binding, vnode) {binding.value(el, binding, vnode)}})安装kindeditornpm install kindeditorkindedito...
vue3-kind-editor:基于KindEditor富文本编辑器，用于Vue3.x的组件
qq_27936291的博客
05-14 1336
这个组件的核心来自KindEditor，是在KindEditor基础上封装的，如果想了解更多配置，你可以查看KindEditor相关配置，在vue结构上增加.
Rich - 简单易用的富文本编辑器组件
最新发布
gitblog_00046的博客
03-16 400
Rich - 简单易用的富文本编辑器组件 Rich 是一款基于 React 的轻量级富文本编辑器组件。它提供了一种简单而高效的方法来处理文本、样式和媒体内容。 使用场景 你可以使用 Rich 编辑器在 Web 应用中创建各种类型的内容，例如： 博客文章 新闻报道 用户评论 帮助文档 在线表单 教程或教程 Rich 支持多种功能，如插入图片、视频和链接，以及其他常见的文本格式选项。 特点 以下...
Vue 手把手教你使用 kindeditor
leleshuo
07-03 7653
Vue 手把手教你使用 kindeditor
vue引入kindeidtor
w1374401940的博客
05-22 839
1.去官网下载kindeditor 2.将其放在一个名为kindeditor的文件夹里，并且将它放在vue里的static文件夹下 3.创建kindeditor.vue ```javascript <template> <div class="kindeditor"> <textarea :id="id" v-model="content"></textarea> </div> </template> <sc
VUE引入kindeditor、本地化、一键排版样式等操作
qq_38718629的博客
04-01 2530
文中所有资源可点击此处免费下载 1、创建VUE项目，安装kindeditor cnpm i kindeditor -S 2、在components下新建KindEditor文件夹，新建Index.vue组件， <template> <div class="margin-top-20"> <textarea name="content" :id="id" v-model="outContent"></textarea> <div st
vue-kindeditor 安装和解决问题
张小胖
05-30 1445
1、kindeditor 安装 与 使用 2、kindeditor 光标下插入内容 3、kindeditor 上传图片和视频
vue2.x 富文本编辑器Tinymce的使用
CC酱写前端的博客
01-29 1883
vue2.x 富文本编辑器Tinymce的使用
vue 2.0使用tinymce-vue富文本
Allen的博客
10-19 1158
vue 2.0使用tinymce-vue富文本
vue中使用kindeditor编辑器_vue中使用kindeditor富文本编辑器
weixin_29056781的博客
12-30 1282
第一步，下载依赖yum install kindeditor第二步，建立kindeditor.vue组件import '../../node_modules/kindeditor/kindeditor-all.js'import '../../node_modules/kindeditor/lang/zh-CN.js'import '../../node_modules/kindeditor/th...
vue封装KindEditor组件内容
04-01
免费资源供大家下载，欢迎大家使用和指正 富文本使用较少，只是一些自己的使用经验，如有不足之处可以讨论，请勿开喷
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传
10-12
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传,避免用户到处寻找，解决了用户粘贴复制截图时候，图片变成base64,上传给后台的时候长度过于长，所以在粘贴的时候就上传给服务器，最后以形式显示在富文本里面，再上传给后台
Vue后台管理系统实现权限控制
05-17
基于Vue和element-ui组件库搭建的一个后台管理系统。主要讲的是关于后台管理系统权限控制问题，包括：菜单控制、界面控制、按钮控制、请求和响应控制。
基于Vue的后台管理系统模板
02-18
基于Vue的后台管理系统模板
浅谈vue后台管理系统权限控制思考与实践
10-17
主要介绍了浅谈vue后台管理系统权限控制思考与实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于vue + element UI 的后台管理系统模板
09-12
基于vue + element UI，实现登录页，系统主框架，动态路由的后台管理系统模板
使用vue3封装wangeditor富文本组件
06-03
好的，我可以为您介绍一下使用Vue3封装WangEditor富文本组件的步骤。 首先，我们需要安装WangEditor和Vue3，可以通过以下命令进行安装： ```bash npm install wangeditor@latest npm install vue@next ``` 接着，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值