美文网首页
vue中使用kindeditor富文本编辑器2

vue中使用kindeditor富文本编辑器2

作者: i_木木木木木 | 来源:发表于2020-06-08 09:42 被阅读0次

    第一步,下载依赖

    yarn add kindeditor
    

    第二步,建立kindeditor.vue组件

    <template>
      <div class="kindeditor">
        <textarea :id="id" name="content" v-model="outContent"></textarea>
      </div>
    </template>
    
    <script>
     import '../../node_modules/kindeditor/kindeditor-all.js'
     import '../../node_modules/kindeditor/lang/zh-CN.js'
     import '../../node_modules/kindeditor/themes/default/default.css' 
    
    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>
    

    第三步,引入使用

    <template>
      <div id="app">
         <editor id="editor_id" height="500px" width="700px" :content.sync="editorText" :afterChange="afterChange()" :loadStyleMode="false" @on-content-change="onContentChange"></editor>
        <div> editorTextCopy: {{ editorTextCopy }} </div>
    
      </div>
    </template>
    
    <script> 
    import editor from './components/kindeditor.vue' 
    export default {
      name: 'app',
      components: {
        editor
      },
      data () { return {
          editorText: '直接初始化值', // 双向同步的变量
     editorTextCopy: ''  // content-change 事件回掉改变的对象
     }
      },
        methods: {
        onContentChange (val) { this.editorTextCopy = val;
          window.console.log(this.editorTextCopy)
        },
        afterChange () {
        }
      }
    } </script>
    

    效果如下:

    image.png

    来源:https://www.cnblogs.com/ldlx-mars/p/11881242.html

    相关文章

      网友评论

          本文标题:vue中使用kindeditor富文本编辑器2

          本文链接:https://www.haomeiwen.com/subject/vobazhtx.html