富文本编辑器-tinymce的各种应用

分手后的思念是犯贱 2022-10-16 02:53 323阅读 0赞

## 为什么用这个编辑器？ ##

*  pc和H5皆可，纯粹的html？vue？angular？react？皆可
 *  简单，直接，输出dom
 *  功能强大，你想要的几乎都有了

## 安装 ##

*  这里建议下载源码到本地使用  
    [下载地址][Link 1]
 *  然后引入js  
    `你的路径+/tinymce/js/tinymce/tinymce.min.js`
 *  初始化  
    `tinymce.init({各种配置})`
 *  配置项随心所欲吧  
    [自定义配置选择][Link 2]
 *  H5  
    [H5的基本配置][H5]
 *  框架中使用？  
    [vue，react，anular以及其他框架怎么用？Java，python等等也行哟][vue_react_anular_Java_python]
 *  汉化包也给你准备好啦  
    [汉化包][Link 3]

## 直接上代码 ##

#### 先说明，这个页面是给原生APP嵌入用的，实现了基本的内容插入，最新内容获取，设置只读 ####

*  其实呢，这也是我从之前写好的vue代码中微改，之前是webview link。后面将页面打包到项目中所以从spa改成了html，只是微调，其实几乎没什么改动

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>总结</title>
        <script src="/jquery.js"></script>
        <script> var clientWidth = $(window).width(); clientWidth = clientWidth <= 414 ? clientWidth : 414; $("html").css("fontSize", (clientWidth / 750) * 100 + "px"); </script>
        <script src="/utils/tinymce/js/tinymce/tinymce.min.js"></script>
        <script> $(function () { function init() { tinymce.init({ selector: "#mySummarize", inline: false, language: "zh_CN", extended_valid_elements: "a[class|target|href|onclick],div[class|onclick|id|style],link[rel|href]", width: clientWidth, height: 320, branding: false, menubar: false, statusbar: false, mobile: { fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px", plugins: [ "advlist autolink lists link charmap print preview anchor image", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste code help wordcount", "emoticons", ], toolbar: "fontsizeselect bold italic underline strikethrough bullist numlist link emoticons alignleft aligncenter alignright alignjustify", }, setup: function (editor) { }, }); } init(); // 获取native传回的dom param:一坨dom window.responseFromNative = responseFromNative; // 将编辑好的内容返回给native param:一坨dom window.subNewReportFromNative = subNewReportFromNative; // 根据native写回的数据确定是否可编辑 param: true-只读 false-可编辑 window.setEditorReadOnly = setEditorReadOnly; // 获取小结内容 function responseFromNative(response) { tinymce.activeEditor.setContent( response.content.replace(/\\n/g, "<br/>") ); // $("#mySummarize").html(response.content.replace(/\\n/g, "<br/>")); } // 返回最新的小结内容 function subNewReportFromNative() { return tinymce.activeEditor.getContent(); } // 设置编辑器只读状态 function setEditorReadOnly(readonly) { if (readonly) { tinymce.activeEditor.setMode("readonly"); } else { tinymce.activeEditor.setMode("design"); } } }); </script>
        <style> * { padding: 0; margin: 0; } .summarize { margin: 0 auto; } .tox-tinymce { border: none !important; } </style>
      </head>
      <body>
        <div class="summarize" id="mySummarize"></div>
      </body>
      <script> $(".summarize").width(clientWidth); </script>
    </html>

## 图片上传功能 ##

*  第一步在plugins中添加image
 *  在toobar中开启image 按钮
 *  在init中初始化images\_upload\_handler方法

images_upload_handler: (blobInfo, success, failure) => { 
           let formData = new FormData()
           // 此处注意，如果你接口参数是个对象，那么这个file你就需要替换成你要的key名称
           formData.append('file', blobInfo.blob())
           if (blobInfo.blob().size / 1024 / 1024 > 50) { 
             failure('上传失败，图片大小请控制在 50M 以内')
             return
           }
           respons.post(this.uploadUrl, formData).then(res => { 
             if (res.status === 200) { 
               success(res.data.downloadUrl)
             } else { 
               failure('图片上传失败,联系开发人员')
             }
           })
         },

*  坑： 看到在`formData.append('file', blobInfo.blob())`这句了么？key，也就是这个file可以换成你的请求参数的key因为formData最终给你的是一个对象，而key就是这个file你懂我意思吧？？

## 图片黏贴，拖拽上传? ##

*  `paste_data_images: true // 开启粘贴功能`
 *  `images_file_types: 'jpeg,jpg,png,gif,bmp,webp'//指定可拖拽的类型`

## 基本功能加图片上传，粘贴，拖拽上传 ##

## 文件上传 ##

*  plugins中添加 link
 *  toobar 中添加 link
 *  `file_picker_types: 'file image media', // 此处你可以去掉image`
 *  `file_picker_callback: (callback, value, meta) => {} // 上传方法`
 *  如果上传完成返回url需要点击打开的话，那么你可以指定打开方式，默认在当前浏览器打开，可以设置新开浏览器打开
 *  `default_link_target: '_blank', // 超链接默认打开方式`

file_picker_callback: (callback, value, meta) => { 
            //文件分类
            var filetype =
              '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
            //模拟出一个input用于添加本地文件
            var input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.setAttribute('accept', filetype)
            input.click()
            let that = this
            input.onchange = function(cb, value, meta) { 
              let file = this.files[0]
    
              let formData = new FormData()
              formData.append('file', file, file.name)
              respons.post(that.uploadUrl, formData).then(res => { 
                if (res.status === 200) { 
                  callback(res.data.downloadUrl, { 
                    text: file.name,
                    title: file.name
                  })
                } else { 
                  that.$message({ 
                    message: res.message,
                    type: 'warn'
                  })
                }
              })
            }
          }

### 全部代码 ###

this.init = { 
          selector: this.$refs.editor,
          inline: false,
          language_url: '/tinymce/langs/zh_CN.js', // 使用中文包
          language: 'zh_CN', //语言设置为中文
          skin_url: '/tinymce/skins/ui/oxide', //皮肤包
          // 该配置添加在Init中
          extended_valid_elements:
            'a[class|target|href|onclick],div[class|onclick|id|style],link[rel|href]',
    
          // height: 400, // 高度
          width: 572,
          branding: false,
          readonly: true,
          plugins:
            'advlist autolink lists link charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount emoticons image attachment',
          toolbar:
            'image link bold italic underline strikethrough bullist numlist emoticons attachment',
          menubar: false,
          paste_data_images: true,
          images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
          images_upload_handler: (blobInfo, success, failure) => { 
            let formData = new FormData()
            formData.append('file', blobInfo.blob())
            if (blobInfo.blob().size / 1024 / 1024 > 50) { 
              failure('上传失败，图片大小请控制在 50M 以内')
              return
            }
            respons.post(this.uploadUrl, formData).then(res => { 
              if (res.status === 200) { 
                success(res.data.downloadUrl)
              } else { 
                failure('图片上传失败,联系开发人员')
              }
            })
          },
          file_picker_types: 'file media',
          default_link_target: '_blank', // 超链接默认打开方式
          file_picker_callback: (callback, value, meta) => { 
            //文件分类
            var filetype =
              '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
            //模拟出一个input用于添加本地文件
            var input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.setAttribute('accept', filetype)
            input.click()
            let that = this
            input.onchange = function(cb, value, meta) { 
              let file = this.files[0]
    
              let formData = new FormData()
              formData.append('file', file, file.name)
              respons.post(that.uploadUrl, formData).then(res => { 
                if (res.status === 200) { 
                  callback(res.data.downloadUrl, { 
                    text: file.name,
                    title: file.name
                  })
                } else { 
                  that.$message({ 
                    message: res.message,
                    type: 'warn'
                  })
                }
              })
            }
          }
        }

## 文件上传加强版本（支持拖拽） ##

*  先安装我们需要的插件  
    `npm i @npkg/tinymce-plugins 或 cnpm i @npkg/tinymce-plugins -D`
 *  紧接着按要求引入你所需要的插件

import '@npkg/tinymce-plugins/upfile' 
    import '@npkg/tinymce-plugins/attachment'

*  配置插件

tinymce.init({ 
        selector: '#tinydemo',
        plugins: "upfile attachment",
        toolbar: "upfile attachment",
        attachment_max_size: 209715200,
        attachment_style:'.attachment>img{display:inline-block!important;max-width:30px!important;}'
        attachment_icons_path: 'https://unpkg.com/@npkg/tinymce-plugins/plugins/attachment/icons',
        attachment_upload_handler: function (file, succFun, failFun, progressCallback) { 
          // 上传逻辑 
        },
         file_callback: function (file, succFun) { 
         // 上传逻辑
         succFun(url,{ text: 'xx.pdf'}) //成功回调函数 text 显示的文本
        }
    });

## attachment超链接不是带提示嘛？下载改成预览？？ ##

if (e.target.nodeName === 'A') { 
                // 弹窗btn
                let box = document.getElementsByClassName('tox-tinymce-aux')[0]
                box.addEventListener('DOMNodeInserted', e => { 
                  if (e.target.className === 'tox-toolbar__group') { 
                    e.target.children[0].innerText = '预览'
                  }
                })
              }

## 关于汉化 ##

*  如果有的地方没有汉化到位
 *  那就汉化包里新增map

'Alternative source URL': '\u66ff\u4ee3\u8d44\u6e90\u5730\u5740',
      'Alternative description': '\u66ff\u4ee3\u8bf4\u660e\u6587\u5b57',

// 看这里  
https://blog.csdn.net/qq\_41923622/article/details/111810804

## 这版本5+版本，代码拿去即用 ##

[Link 1]: https://www.tiny.cloud/get-tiny/self-hosted/
[Link 2]: http://tinymce.ax-z.cn/configure/integration-and-setup.php
[H5]: http://tinymce.ax-z.cn/mobile.php
[vue_react_anular_Java_python]: http://tinymce.ax-z.cn/integrations/integrate-index.php
[Link 3]: https://www.tiny.cloud/get-tiny/language-packages/