基于 Tinymce 的富文本编辑器

girf-tinymce-editor

安装

npm i girf-tinymce-editor

或

yarn add girf-tinymce-editor

使用

• [ index.html ] 部分

  <script src="https://d.giraffe.com.cn/lib/tinymce.5.1.5/tinymce.min.js"></script>

• [ template ] 部分

  <template>
    <div>
        ...
        <!-- 富文本编辑器 -->
        <tinymce-editor 
          :open="componentTinymceEditor.open" 
          :content="componentTinymceEditor.content" 
          :config="componentTinymceEditor.config" 
          @result="componentTinymceEditor.result" 
        />
        ...
    </div>
  </template>

• [ javascript ] 部分

  // 组件：Excel导出
  import tinymceEditor from 'girf-tinymce-editor'
  
  export default {
  
      components: { 
          tinymceEditor 
      },
  
      data () {
  
          return {
  
            // 组件：富文本编辑器
            componentTinymceEditor: {
                content: '',
                config: {
                    img_upload: {
                        // url: API_DEMO.oss.upload,
                        // token: STORAGE.GET('TOK'),
                        maxSize: 2,
                        allowType: ['gif']
                    }
                },
                result: ( _data )=> {
                  console.log(_data)
                }
            }
          }
      }
  }

  属性

| 名称 | 描述 | | ---------- | ----------------------------------------------------- | | :content | 类型String，作为文本内容传入编辑器，可以使用v-model实现双向绑定 | | :config | 类型Object，编辑器的设置 |