tinymce_ryl

自定义通用的组件

Build Setup

# install dependencies
# npm install
# 所有子方法

    # 1.富文本 -- handTinymce

         <handTinymce
           id="myEditor" //唯一容器id
           :height="400" // 默认400
           v-model="content"
           placeholder="请输入内容" // 默认文案：请输入内容
           :uploadType="'initUpload'" // 图片上传方式 默认:base64 自定义上传:initUpload （使用这个方法是选择图片后，则直接走接口返回图片链接）
           url="/static" // 插件和汉化包路径，默认 /static
           @handleImgUpload="handleImgUpload" // 如果是自定义上传，这个方法接收3个参数，如下:
           toolbar="bold italic underline strikethrough link alignleft aligncenter alignright forecolor backcolor image table styleselect fontselect fontsizeselect preview removeformat fullscreen"
         />

        # 切记，如果要使用该富文本，则要先手动引入如下配置:
            #// import "tinymce/icons/default/icons";
            #// import "tinymce/themes/silver";
            #// // 引入富文本编辑器主题的js和css
            #// import "tinymce/themes/silver/theme.min";
            #// import "tinymce/skins/ui/oxide/skin.min.css";
            #// // 扩展插件
            #// import "tinymce/plugins/image";
            #// import "tinymce/plugins/link";
            #// import "tinymce/plugins/code";
            #// import "tinymce/plugins/table";
            #// import "tinymce/plugins/lists";
            #// import "tinymce/plugins/wordcount"; // 字数统计插件
            #// import "tinymce/plugins/media"; // 插入视频插件
            #// import "tinymce/plugins/template"; // 模板插件
            #// import "tinymce/plugins/fullscreen";
            #// import "tinymce/plugins/paste";
            #// import "tinymce/plugins/preview";
            #// import "tinymce/plugins/hr";
        
        # 这个方法是把内容中的base64的图片，替换成 接口返回 的图片链接

        # content (需要检查的文案) apiUrl (上传的接口地址)  token (需要的token)
        # handleBase64Images(content, apiUrl, token)

        # 使用方法

          # let content = await this.handleBase64Images(
          #    content,
          #    process.env.VUE_APP_BASE_URL_SAAS + "/user/common/uploadBase64",
          #    this.$cookieGet("TOKEN")
          #  );

        

        # 自定义上传图片 （这个方法是选择图片后，直接走接口 返回图片链接）
        # handleImgUpload(blobInfo, success, failure){
        #     let formdata = new FormData();
        #     formdata.append("image", blobInfo.blob());
        #     axios({
        #         method: "post",
        #         url: process.env.VUE_APP_BASE_URL + "/admin/common/upload",
        #         headers: {
        #         Authorization: "Bearer " + this.$cookieGet("TOKEN")
        #         },
        #         data: formdata,
        #     }).then((res) => {
        #         if (res.data.code != 200) {
        #         failure("操作提示: " + res.msg);
        #         return;
        #         }
        #         success(res.data.data.imageUrl);
        #     });
        # }

        # 对应的其他方法：

            # setContent() 设置值
            # getContent() 获取值

# serve with hot reload at localhost:8080
# npm run dev

# build for production with minification
# npm run build

#1.0.5: 修复 getContent() 方法获取值失败的情况
#1.0.7: 新增了 handleBase64Images 方法 把base64图片的值 替换为接口返回的链接

For detailed explanation on how things work, consult the docs for vue-loader.