富文本编译器-配合gin使用

一。引入样式

<!-- 富文本编辑器 -->
<link href="/static/wysiwyg-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/wysiwyg-editor/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="/static/wysiwyg-editor/js/zh_cn.js"></script>

二。使用对象

<div role="tabpanel" class="tab-pane" id="detail">

    <textarea name="content" id="content" cols="100" rows="8"></textarea>

</div>

三。定义富文本编译器配置

<script>
    new FroalaEditor('#content',{
        height: 300,
        language: 'zh_cn', //使用语言包首先需要引入，还要注意下划线
        //自定义标题
        toolbarButtons: [ ['undo', 'redo'], ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'] ],
        toolbarButtonsXS: [ ['undo', 'redo'], ['bold', 'italic', 'underline'] ]
    });
</script>

四。图片上传

new FroalaEditor('#content',{
    height: 300,
    language: 'zh_cn', //使用语言包首先需要引入，还要注意下划线
    //自定义标题
    // toolbarButtons: [ ['undo', 'redo'], ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'] ],
    // toolbarButtonsXS: [ ['undo', 'redo'], ['bold', 'italic', 'underline'] ]
    imageUploadURL: '/admin/goods/imageUpload' //图片上传请求后台路径
});

后台图片上传处理

// 后台商品详情页面的富文本编辑器的图片上传
func (con GoodsController) ImageUpload(c *gin.Context) {
   //上传图片
   imgDir, err := model.UploadImg(c, "file") //可以在网络里面看到传递的参数,请求的荷载里面
   if err != nil {
      c.JSON(http.StatusOK, gin.H{
         "link": "",
      })
   } else {
      c.JSON(http.StatusOK, gin.H{
         "link": "/" + imgDir,
      })
   }
}

 

 

// 上传图片
func UploadImg(c *gin.Context, picName string) (string, error) {
   //1.获取上传的文件
   file, err := c.FormFile(picName)
   if err != nil {
      return "", err
   }
   //2.获取后缀名 判断类型是否正确 .jpg .png .gif .jpeg
   extName := path.Ext(file.Filename)
   allowExtMap := map[string]bool{
      ".jpg":  true,
      ".png":  true,
      ".gif":  true,
      ".jpeg": true,
   }

   if _, ok := allowExtMap[extName]; !ok {
      return "", errors.New("文件后缀名不合法")
   }
   //3,创建图片保存目录 static/upload/20230308
   day := GetDay()
   dir := "./static/upload/" + day

   err1 := os.MkdirAll(dir, 0666)
   if err1 != nil {
      fmt.Println(err1)
      return "", err1
   }
   //4.生成文件名称和文件保存的目录
   fileName := strconv.FormatInt(GetUnix(), 10) + extName
   //5.文件上传

   dst := path.Join(dir, fileName)
   c.SaveUploadedFile(file, dst)
   return dst, nil
}