基于 Tinymce 的富文本编辑器

安装

npm i tony-tinymce-wrap

或

yarn add tony-tinymce-wrap

使用

• [ index.html ] 部分

  ...
  <script src="https://oss.sh123.cn/libs/tinymce.5.1.5/tinymce.min.js"></script>
  ...

• [ template ] 部分

  <template>
    <div>
        ...
        <tinymce-editor 
          :value="componentTinymceEditor.content" 
          :setting="componentTinymceEditor.setting" 
          @result="componentTinymceEditor.result">
        </tinymce-editor>
        ...
    </div>
  </template>

• [ javascript ] 部分

  import TinymceEditor from 'tony-tinymce-wrap'
  
  export default {
  
      components: { 
          TinymceEditor 
      },
  
      data () {
  
          return {
  
            // Tinymce 富文本编辑器
            componentTinymceEditor: {
                content: '<p>Tinymce富文本编辑器</p>',
                setting: {
                    img_upload: {
                        api_url: '',
                        access_token: ''
                    }
                },
                result: ( _cnt ) => {
                    console.log(_cnt)
                }
            }
          }
      }
  }

  参数说明

  | 名称 | 描述 | | ----------- | ----------------------------------------------------- | | :value | 类型 String，作为文本内容传入编辑器 | | :setting | 类型 Object，编辑器配置项: img_upload 类型 Object，详细见下方参数说明；其他配置见：http://tinymce.ax-z.cn/general/basic-setup.php | | @result | 类型 Function，编辑器中 Input Change Undo Redo 事件响应后触发的事件返回文本内容，可绑定父页面对应数据 |

  img_upload 参数说明

  | 名称 | 描述 | | ----------- | ----------------------------------------------------- | | api_url | 类型 String，图片上传的API地址 | | access_token | 类型 String，请求头(Header)的Token | | max_size | 类型 Number，图片上传的最大限制，默认：1，单位：M | | allow_type | 类型 Array，图片上传的格式限制，默认：['jpeg', 'png', 'gif'] |