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

最新推荐文章于 2024-07-29 19:26:43 发布

南麟剑首

最新推荐文章于 2024-07-29 19:26:43 发布

阅读量1.6k

点赞数

分类专栏：前端项目 web 文章标签：富文本 vue富文本富文本编辑器 tinymce

本文链接：https://blog.csdn.net/qq_38560742/article/details/117293593

版权

前端项目同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

web

9 篇文章 0 订阅

订阅专栏

为什么用这个编辑器？

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

安装

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

直接上代码

先说明，这个页面是给原生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'//指定可拖拽的类型

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

    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 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('图片上传失败,联系开发人员')
          }
        })
      }
    }

文件上传

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+版本，代码拿去即用

南麟剑首

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录