vue-kindeditor 安装和解决问题

已于 2023-05-30 18:38:42 修改
阅读量1.5k 收藏 1
点赞数 1
文章标签： vue.js 数学建模 前端
于 2023-05-30 18:34:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41854372/article/details/130954362
版权

效果图

 kindeditor 引入

    一、去官网下载 kindeditor 包  官方链接

        

  二、在vue里的static文件夹下 创建一个 文件夹名字叫 kindeditor， 把下载好的文件放在这里

 三、在 公共组件 components 下 创建kindeditor.vue 文件

<template>
  <div class="kindeditor">
    <textarea :id="id" name="content">{{ outContent }}</textarea>
  </div>
</template>

<script>
export default {
  name: 'kindeditor',
  data () {
    return {
      editor: null,
      outContent: this.content
    }
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    minWidth: {
      type: Number,
      default: 650
    },
    minHeight: {
      type: Number,
      default: 100
    },
    items: {
      type: Array,
      default: function () {
        return [
          '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'
        ]
      }
    },
    noDisableItems: {
      type: Array,
      default: function () {
        return ['source', 'fullscreen']
      }
    },
    filterMode: {
      type: Boolean,
      default: true
    },
    htmlTags: {
      type: Object,
      default: function () {
        return {
          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': []
        }
      }
    },
    wellFormatMode: {
      type: Boolean,
      default: true
    },
    resizeType: {
      type: Number,
      default: 2
    },
    themeType: {
      type: String,
      default: 'default'
    },
    langType: {
      type: String,
      default: 'zh-CN'
    },
    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
    },
    bodyClass: {
      type: String,
      default: 'ke-content'
    },
    colorTable: {
      type: Array
    },
    afterCreate: {
      type: Function
    },
    afterChange: {
      type: Function
    },
    afterTab: {
      type: Function
    },
    afterFocus: {
      type: Function
    },
    afterBlur: {
      type: Function
    },
    afterUpload: {
      type: Function
    },
    uploadJson: {
      type: String
    },
    fileManagerJson: {
      type: Function
    },
    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
    },
    fontSizeTable: {
      type: Array,
      default: function () {
        return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
      }
    },
    imageTabIndex: {
      type: Number,
      default: 0
    },
    formatUploadUrl: {
      type: Boolean,
      default: true
    },
    fullscreenShortcut: {
      type: Boolean,
      default: false
    },
    extraFileUploadParams: {
      type: Array,
      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
    }
  },
  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)
    }
  },
  mounted () {
    var _this = this
    _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.cssPath,
      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: function () {
        _this.afterChange
        _this.outContent = this.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文件里面创建文件夹名字叫 plugin  并在里面创建kindeditor.js 文件

import KindEditor from '../components/KindEditor'
const install = function (Vue) {
  if (install.installed) return
  install.installed = true
  Vue.component('editor', KindEditor)
}

export default install

五、然后在main.js里引入相关信息

import VueKindEditor from './plugin/kindeditor.js'
	import '../static/kindeditor/themes/default/default.css'
	import '../static/kindeditor/kindeditor-all.js'
	import '../static/kindeditor/lang/zh-CN.js'

六、然后就可以在组件中引入了

<template>
  <div class="table"> 
    <editor id="editor_id" height="500px" width="700px" :content.sync="editorText"
            :afterChange="afterChange()"
            pluginsPath="../../../static/kindeditor/plugins/"
            :loadStyleMode="false"
            @on-content-change="onContentChange"></editor>
    <div> editorTextCopy: {{ editorTextCopy }} </div>
  </div>
</template>

<script>
export default {
  name: 'table',
  data () {
    return {
      editorText: '直接初始化值', // 双向同步的变量
      editorTextCopy: ''  // content-change 事件回掉改变的对象
    }
  },
    methods: {
    onContentChange (val) {
      this.editorTextCopy = val;
      console.log(this.editorTextCopy)
    },
    afterChange () {
    }
  }
}
</script>

<style>

</style>


解决 kindeditor

一、 在光标位置插入内容

 const str = `<img src="${response}" style="max-width:100%"/>`

 // 这里就是插入光标位置了，因为在 KindEditor.vue 已经初始化了editor，所以我们可以直接使用 
    this.$refs.editor.editor.insertHtml(str)

二、在同一个组件下面使用两个富文本，导致其中有一个不生效

 - 在同一个文件，两个id 不能一直 id="editor_id"，
 - 这里的同一个文件夹 包括 在子组件 或 el-dialog组件

三、kindeditor上传到服务器视频文件过大

  •    在**application.properties**加入以下配置即可
##视频上传大小
	spring.http.multipart.maxFileSize=50Mb
	spring.http.multipart.maxRequestSize=50Mb

四、kindeditor 自定义上传图片和视频

  •  在 公共组件 components 下 kindeditor.vue 文件修改
  •  this.$api.file.upload 和 oss.upload 是上传文件后端返回来 url 的方法
<template>
  <div class="kindeditor">
    <input
      accept=".png,.jpg,.gif"
      @change="pictureFileChange"
      type="file" ref="pictureFile" style="display: none">
    <input
      accept=".mp4"
      @change="videoFileChange"
      type="file" ref="videoFile" style="display: none">
    <textarea
      :id="id" name="content">{{ outContent }}</textarea>
  </div>
</template>

<script>
import oss from '@utils/oss'
export default {
  name: 'kindeditor',
  data () {
    return {
      editor: null,
      pictureData: {
        editor: null
      },
      videoData: {
        editor: null
      },
      outContent: this.content
    }
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    minWidth: {
      type: Number,
      default: 650
    },
    minHeight: {
      type: Number,
      default: 100
    },
    items: {
      type: Array,
      default: function () {
        return [
          'source',
          '|',
          'undo',
          'redo',
          '|',
          'preview',
          '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',
          '|',
          'insertfile',
          'table',
          'hr',
          'pagebreak',
          'anchor',
          'link',
          'unlink',
          '|',
          'about',
          'picture',
          'video'
        ]
      }
    },
    // , 'image', 'media'
    noDisableItems: {
      type: Array,
      default: function () {
        return ['source', 'fullscreen']
      }
    },
    filterMode: {
      type: Boolean,
      default: false
    },
    htmlTags: {
      type: Object,
      default: function () {
        return {
          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': []
        }
      }
    },
    wellFormatMode: {
      type: Boolean,
      default: true
    },
    resizeType: {
      type: Number,
      default: 2
    },
    themeType: {
      type: String,
      default: 'default'
    },
    langType: {
      type: String,
      default: 'zh-CN'
    },
    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
    },
    bodyClass: {
      type: String,
      default: 'ke-content'
    },
    colorTable: {
      type: Array
    },
    afterCreate: {
      type: Function
    },
    afterChange: {
      type: Function
    },
    afterTab: {
      type: Function
    },
    afterFocus: {
      type: Function
    },
    afterBlur: {
      type: Function
    },
    afterUpload: {
      type: Function
    },
    uploadJson: {
      type: String
    },
    fileManagerJson: {
      type: Function
    },
    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
    },
    fontSizeTable: {
      type: Array,
      default: function () {
        return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
      }
    },
    imageTabIndex: {
      type: Number,
      default: 0
    },
    formatUploadUrl: {
      type: Boolean,
      default: true
    },
    fullscreenShortcut: {
      type: Boolean,
      default: false
    },
    extraFileUploadParams: {
      type: Array,
      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
    }
  },
  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)
    }
  },
  methods: {
    async pictureFileChange (e) {
      const files = e.target.files;
      if(files && files[0]) {
        const file = files[0];
        console.log(file.type)
        const typeList = ["image/jpg","image/jpeg","image/png","image/pjpeg","image/gif","image/bmp","image/x-png"]
        if(file.size > 1024 * 1024 * 10) {
          this.$message.error('图片大小不能超过10M！')
          return false;
        } else if (!typeList.find(v => v === file.type)) {
          this.$message.error('图片格式有误！')
          return false;
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          await oss.upload(file).then((url) => {
            loading.close()
            const str = `<p><img src="${url}" style="max-width:100%"/></p>`
            this.pictureData.editor.insertHtml(str);
          })
          setTimeout(() => {
            loading.close()
          }, 10000)
        }
      }
    },
    videoFileChange (e) {
      const files = e.target.files;
      if(files && files[0]) {
        const file = files[0];
        console.log(file.type)
        const typeList = ["video/mp4"]
        if(file.size > 1024 * 1024 * 500) {
          this.$message.error('视频大小不能超过500M！')
          return false;
        } else if (!typeList.find(v => v === file.type)) {
          this.$message.error('视频格式有误！')
          return false;
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const formData = new FormData()
          formData.append('file', file)
          this.$api.file.upload(formData).then(res => {
            if (res.code === 200) {
              const _URL = window.URL || window.webkitURL
              const video = document.createElement('video')
              video.onloadedmetadata = () => {
                loading.close()
                const str = `<p>
                        <img
                             class="richTextVideoBox"
                             style="border: 1px solid #AAA;
                             display: inline-block;
                             background-position: center center;
                             background-repeat: no-repeat;
                             width: 100%;
                             height: 50px;
                             background-image: url('https://eos-wuxi-1.cmecloud.cn/desheng-teach/admin-35/938101f2e07d46ff87a9ddf9597bfcb3.gif');"
                             />
                          <video
                           class="richTextVideoBox"
                           style="display: none;width: 100%;"
                             src="${res.data[0]}"  filterMode="false" controls autobuffer autoplay muted/>
                      </p>`
                this.videoData.editor.insertHtml(str);
              }
              video.src = _URL.createObjectURL(file)
              video.load() // fetches metadata

            }
          })
          setTimeout(() => {
            loading.close()
          }, 10000)
        }
      }
    },
  },
  mounted () {
    var _this = this
    window.KindEditor.lang({
      picture : '上传图片',
      video : '上传视频',
    });
    window.KindEditor.plugin('picture', function(K) {
      var editor = this, name = 'picture';
      editor.clickToolbar(name, function() {
        _this.$refs.pictureFile.click();
        _this.pictureData.editor = editor
      });
    });
    window.KindEditor.plugin('video', function(K) {
      var editor = this, name = 'video';
      editor.clickToolbar(name, function() {
        _this.$refs.videoFile.click();
        _this.videoData.editor = editor
      });
    });
    _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.cssPath,
      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: function () {
        _this.afterChange
        _this.outContent = this.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>
  .ke-toolbar-icon-url {
    background-image: url(https://hysertest.oss-cn-shenzhen.aliyuncs.com/userupload/578dbc61-1f57-406e-86a7-3bb8fd753782default.4a1cec12.png?Signature=8fhX%2B1oYENtnth50y6%2BVkdX4rgs%3D&AWSAccessKeyId=l1f3KYCLRmxhm69u&Expires=4788815796) !important;
  }
  .ke-icon-video {
    background-image: url(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAACQAAAABZpYQBAAABlklEQVQoFV1RTyiDcRh+Pn0H3LSkXDQ5aAnjgHLhQlrCiIMd7KL823KRmljt4CCF25SUozUuCuXPQa0dmB3YauvzWd/++WQ25ttq+fhebcx7+D3P732f5+33e1/m6NwtC6wKjRWluPbx+BtyNknXZEr+xlcMdbVAo9EwfzUsF37GYE8rzJZV7NrMSOVSVM9kMpA+1TDMLKHfqsKIygznyQXVOI6Ttw9vibMRMYuS3BOexCglXC4XYeSjFMlUgvhjQgSfFnDr5bG47iSzobce4/NrYAP+e4xNn+FdktA3uUAGhedjVK+Drq4NfEgAF+KwuWKEzmjB7Fg7SVjlNI13Q6/XM1t7R/LEwwEOG4wok+Ooqq5DbU0llO/kg3sUieaRddgtjMP+U1aGJW7sQ+u2wu+NIx4JwhMU8l5CPvpGmJR+mtILfhWviF3eAZIMX0xCs3YA6u9iOBcrSNbtO8Q9vgBhUYN0thwvYhjKZpSBpbOnJIpF04UGN8c7zJXLK89ZNyhXtFNlPcNTtoL4P9lcNqGzo6nI8wVE47JkjKimBwAAAABJRU5ErkJggg=='
    ) !important;
    background-size: 100%;
    background-position: 0px 3px;
    width: 16px;
    height: 16px;
  }
  .ke-icon-picture {
    background-image: url(
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAADwAAAADW5XGhAAABtUlEQVQoFZ1STUsCURQ9L0absUYbA1v0YVoboQ8LSZBWgv+gXT/AVZvoB9S6ResWuWgpLRNaqEtpobUJalVaBhaIOMJkiU3vzXNehRLShcc9795zD+++e0mj0TDpwX9M0zRIhUIBsVjsz3pZlgfm8/k8JDujX23ZsM/rfRHAFzu3okLgs3uNac0lqG81Q+BBQFEUkslkTCHgfQdYkdvvtvgO5i/KvNYzSILHhMBTWcdIXcKDOYXV5SjQrlBGmbOa3N0aP/+ibQWFwM7xKGedPcLnqXEMDa/Njx4e7Ebs8N2LEx1JhX9mDOsbn1BUR18xy9vHrrNewMYkj09A7xCEQnU7hzptp2WY1j0cXkMqdWLhdDqNg8VFMxAIfI9RdRF41FE4PxZ6AlW4HQZaUOD1eq3idJULJJN7pFgsmsFgkIgWHLIGo/M9Rqai03sikUA2mwXdOnL5fAN2mEUiEcK8Nct4PM6wMDZjcaFgL79r3tfL9IV8xM2WjpW5BexHD4nE+mDr/NNyuRxvnAbZmm+fb6NULWF2UhW0SoOLicAwwH/kNzdPl4Q4qxF7MIzAfIeuZFf7Rf0CUp+HJtIbu2MAAAAASUVORK5CYII='
    ) !important;
    background-size: 100%;
    width: 16px;
    height: 16px;
  }
  img.richTextVideoBox{display: none !important;}
  video.richTextVideoBox{display: inline-block !important;}
</style>

996 前端小伙子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中使用kindeditor编辑器_vue中使用kindeditor富文本编辑器
weixin_29056781的博客
12-30 1296
第一步，下载依赖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编辑器_vue集成kindeditor富文本
weixin_30174223的博客
12-30 975
指令该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行Vue.directive('loaded-callback', {inserted: function (el, binding, vnode) {binding.value(el, binding, vnode)}})安装kindeditornpm install kindeditorkindedito...
在Vue项目使用kindEditor富文本编译器以及上传图片
最新发布
xiaoHelloWord的博客
04-16 1359
第一步 第二步，建立kindeditor.vue组件 第三步引入 如果需要自定义行距下拉菜单可以直接修改kindeditor-all.js这个。 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctr
vue-kindEditor --前端富文本编辑器-的使用过程的一次记录
csstmg的博客
12-11 881
vue-kindEditor npm install vue-kindeditor -S npm install kindeditor -S "vue-kindeditor": "^0.4.5", 我没有有main.js中引入 而是放在了组件中使用的vue.component() 分为3个组件 -kindeditor --image.js --index.vue --KindEditor.vue 1.image.js /* eslint-disable */ /**
vue3 集成kindeditor研究
dugucike的专栏
05-26 1127
可以在kindeditor-all.js 里面KE.plugin开头的部分的工一个类似的界面，复制并改名，然后从里面，改内容，比较快，这样就制作了一个插件，比较叫hello，全部为小写字母组合*kindeditor虽然老，但是稳定，最大的好外是word贴进去不变形，后端部分有安全隐患，我给去掉了，只保留了前端，集成jquery添加了跨域ajax上传功能。图标文件：\public\kindeditor\themes\default\default.png,在这个图片上加图标，大小16*16。
vue3-kind-editor:基于KindEditor富文本编辑器，用于Vue3.x的组件
qq_27936291的博客
05-14 1618
这个组件的核心来自KindEditor，是在KindEditor基础上封装的，如果想了解更多配置，你可以查看KindEditor相关配置，在vue结构上增加.
vue-devtools安装工具包.zip
03-23
内附已用npm处理过的vue-devtools工具包，已配置过源码文件，直接拿来用即可。利用vue-devtools工具包安装vue-devtools的具体操作过程可查看博主主页文档，操作简单，便于上手。
vue-pdf打印实现和乱码解决
05-30
简单方便，有具体操作说明文档和完整源码,含： 1.打印页面demo，pdf.vue，作为vue项目组件使用，样式美观大方，简单方便； 2.pdfjsWrapper.js，核心源码，直接替换就行； 3.pdf打印乱码解决方案使用说明.doc，手把手...
Vue-element-admin安装与问题解决
01-07
可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev 浏览器访问 http://localhost:9527 发布 # 构建测试环境 npm run
安装vue-cli的简易过程
12-11
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node，如果该命令不可用，需要...
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传
10-12
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传,避免用户到处寻找，解决了用户粘贴复制截图时候，图片变成base64,上传给后台的时候长度过于长，所以在粘贴的时候就上传给服务器，最后以形式显示在富文本里面，再上传给后台
vue后台管理系统富文本组件（二）kindeditor
04-30
富文本组件作为后台管理系统的最重要的基础组件之一，好多公司还是习惯使用kindeditor。虽然他的界面比较老，但是相当稳定bug少。
vue集成kindeditor富文本的实现示例代码
12-29
指令 该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行 Vue.directive('loaded-callback', { inserted: function (el, binding, vnode) { binding.value(el, binding, vnode) } }) 安装kindeditor npm install kindeditor kindeditor组件 <template> <div class=kindeditor> <textarea class=form-control ref=k
kindeditor编辑器-封装
03-09
Kindeditor封装,在页面即插即用。3行代码即可集成。包括赋值，取值都已做好封装。 快速方便引用，集成只需1分钟 JS头部 $.initKindEditor 初始化 获取值、复制很方便
kindeditor插件
01-17
非常好 是一个很棒的文本编辑器插件。非常好 是一个很棒的文本编辑器插件
详解如何解决Vue和vue-template-compiler版本之间的问题
10-18
主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
KindEditor的安装和使用
weixin_34326179的博客
12-05 781
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
肖帅的博客
03-24 753
Kindeditor富文本编辑器粘贴图片自动上传功能
vue-pdf 安装提示vue-demi
09-02
你好！关于安装 vue-pdf 时提示需要安装 vue-demi 的问题，这通常是因为 vue-pdf 使用了 vue-demi 这个库作为它的依赖项。 vue-demi 是一个用于兼容 Vue 2 和 Vue 3 的库。在 Vue 3 中，一些 API 发生了变化，vue-demi 提供了与 Vue 2 中 API 类似的替代品，以便在迁移 Vue 2 项目到 Vue 3 时能够更加顺利。 要解决这个问题，你可以按照以下步骤进行操作： 1. 首先，确保你的项目中已经安装了 vue-demi。你可以通过运行以下命令进行安装： ```shell npm install vue-demi ``` 或者使用 yarn 的话可以运行： ```shell yarn add vue-demi ``` 2. 安装完成后，尝试再次安装 vue-pdf。运行以下命令： ```shell npm install vue-pdf ``` 或 ```shell yarn add vue-pdf ``` 这样就应该能够成功安装 vue-pdf 了。 希望这能帮到你！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值