pu-editor v1.0.5

puPditor

Description

富文本编辑器组件

vue中使用案例

<template>
  <div class="demo">
    <div class="lf" id="demo"></div>
  </div>
</template>
<script>
import PuEditor from '../utils/puEditor'
export default {
  data () {
    return {
      templateLists: []
    }
  },
  mounted () {
    this.puEditor = new PuEditor('#demo')
    this.puEditor.initPuEditor({
      height: 500,
      showLinkImg: false,
      uploadImgShowBase64: true,
      fontNames: ['PingFangSC-Regular', 'PingFangSC-Medium'],
      menus: ['head', 'bold', 'fontSize', 'fontName', 'italic', 'link', 'image', 'undo', 'redo'],
      showFullScreen: false,
      // leftShowDom: '#showDemo',
      isPreview: true,
      keepTemplate: {
        value: true,
        keepFn: () => this.setTemp(),
        delTempFn: (index) => this.delTempFn(index)
      },
      showTemplate: true,
      templateList: this.templateLists,
      createImg: true
    })
    const list = localStorage.getItem('templateLists')
    if (list) {
      this.templateLists = JSON.parse(list)
      this.puEditor.resetTemp(this.templateLists)
    }
  },
  methods: {
    // 将编辑的文章设置为模板
    setTemp () {
      // 获取富文本的内容
      const cont = this.puEditor.getPuHtml()
      if (cont.length > 0) {
        this.$prompt('请输入模板名称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '请设置模板名称'
        }).then((value) => {
          const obj = {
            name: value.value,
            template: cont
          }
          this.templateLists.unshift(obj)
          this.puEditor.resetTemp(this.templateLists)
          localStorage.setItem('templateLists', JSON.stringify(this.templateLists))
          this.$message.success('已经保存成功，请到模板查看')
        }).catch(() => {
          this.$message.info('取消保存为模板')
        })
      } else {
        this.$message.info('请输入内容，模板不能为空')
      }
    },
    // 删除模板
    delTempFn (index) {
      this.templateLists.splice(index, 1)
      localStorage.setItem('templateLists', JSON.stringify(this.templateLists))
      this.puEditor.resetTemp(this.templateLists)
    }
  }
}
</script>