关于vue中使用富文本tinymce使用，建议收藏

October_CanYang2024-10-23 17:32

一：vue2.X版本 安装

@tinymce/tinymce-vue

  1. 网上查找安装版本
js 复制代码 
 npm install tinymce@5.1.0 -S
 
 npm install @tinymce/tinymce-vue@3.0.1 -S
  1. 本人项目中使用版本
js 复制代码 
"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.10.2",

二：如何使用

  1. 把node_modules/tinymce下的skins 文件夹复制到public文件夹下
  2. 下载中文语言包 Language Packages | Trusted Rich Text Editor | TinyMCE 把解压后的中文语言包zh_CN.js复制到public文件夹下
  1. 在src/views/或者src/componets/你自己的相关文件夹内创建一个vue文件
  1. 文件内容 次文件内容可以直接复制使用
js 复制代码 
<template>
	<div class="tinymce">
		<editor id="tinymce" v-model="Html" :init="tinymceInit" @input="echoEditor" />
		<!-- <div v-html="Html"></div> -->
	</div>
</template>

<script>
import uploadApi from "@/api/uploadApi/upload"
import tinymce from "tinymce/tinymce"
import "tinymce/themes/silver/theme"
import Editor from "@tinymce/tinymce-vue"
import "tinymce/icons/default/icons"
import "tinymce/plugins/image"
import "tinymce/plugins/link"
import "tinymce/plugins/code"
import "tinymce/plugins/table"
import "tinymce/plugins/lists"
import "tinymce/plugins/contextmenu"
import "tinymce/plugins/wordcount"
import "tinymce/plugins/colorpicker"
import "tinymce/plugins/textcolor"
import "tinymce/plugins/print"
import "tinymce/plugins/preview"
import "tinymce/plugins/searchreplace"
import "tinymce/plugins/autolink"
import "tinymce/plugins/directionality"
import "tinymce/plugins/visualblocks"
import "tinymce/plugins/visualchars"
import "tinymce/plugins/media"
import "tinymce/plugins/fullscreen"
import "tinymce/plugins/template"
import "tinymce/plugins/codesample"
import "tinymce/plugins/charmap"
import "tinymce/plugins/hr"
import "tinymce/plugins/pagebreak"
import "tinymce/plugins/nonbreaking"
import "tinymce/plugins/anchor"
import "tinymce/plugins/insertdatetime"
import "tinymce/plugins/advlist"
import "tinymce/plugins/lists"
import "tinymce/plugins/wordcount"
import "tinymce/plugins/imagetools"
import "tinymce/plugins/textpattern"
import "tinymce/plugins/help"
import "tinymce/plugins/emoticons"
import "tinymce/plugins/autosave"
import "tinymce/plugins/autoresize"
// import 'tinymce/baseURL/icons/custom'
// import '../../../public/tinymce/plugins/emoticons'
import "../../../public/tinymce/plugins/bdmap/plugin"
import "../../../public/tinymce/plugins/indent2em/plugin"
import "../../../public/tinymce/plugins/axupimgs/plugin"
// import 'tinymce/plugins/formatpainter'
function suffix(file) {
  const fileNameOne = file.name.lastIndexOf(".") // 取到文件名开始到最后一个点的长度
  const fileNameLength = file.name.length // 取到文件名长度
  const fileFormat = file.name.substring(fileNameOne + 1, fileNameLength) // 截去后缀名
  return fileFormat
}
export default {
  name: "NewTinymce",

  components: { Editor },
  props: {
    tinymceHtml: {
      type: String,
      default: ""
    },
    contentDetails: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      Html: "",
      tinymceInit: {
        language_url: "../../../tinymce/zh_CN.js",
        language: "zh_CN",
        skin_url: "../../../tinymce/skins/ui/oxide",
        emoticons_database_url: "../../../tinymce/plugins/emoticons/js/emojis.js",
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize bdmap indent2em axupimgs",
        //     toolbar:
        //       'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
        // styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
        // table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight axupimgs',
        toolbar: [
          // eslint-disable-next-line no-multi-str
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
       styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
         table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight axupimgs"
        ],
        height: 650, // 编辑器高度
        min_height: 400,
        // icons: 'custom',
        // inline: true,
        // statusbar: false,
        content_css: "../../../tinymce/skins/content/default/content.css", // 可设置编辑区内容展示的css，谨慎使用
        /* '/static/reset.css',
        '/static/ax.css',
        '/static/css.css',
    ],*/
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        link_list: [
          { title: "预置链接1", value: "http://www.tinymce.com" },
          { title: "预置链接2", value: "http://tinymce.ax-z.cn" }
        ],
        image_list: [
          { title: "预置图片1", value: "https://www.tiny.cloud/images/glyph-tinymce@2x.png" },
          { title: "预置图片2", value: "https://www.baidu.com/img/bd_logo1.png" }
        ],
        image_class_list: [
          { title: "None", value: "" }
          // { title: 'Some class', value: 'class-name' }
        ],
        importcss_append: true,
        // 自定义文件选择器的回调内容
        file_picker_callback: function (callback, value, meta) {
          if (meta.filetype === "file") {
            // // 要先模拟出一个input用于上传本地文件
            var input = document.createElement("input")
            input.setAttribute("type", "file")
            // 你可以给input加accept属性来限制上传的文件类型
            // 例如：input.setAttribute('accept', '.jpg,.png')
            input.setAttribute("accept", ".doc,.docx,.ppt,.pptx,.pdf,.xlsx")

            input.onchange = function () {
              var file = this.files[0]
              let suffixY = ""
              if (suffix(file) === "doc" || suffix(file) === "docx") {
                suffixY = "msword"
              } else if (suffix(file) === "pdf") {
                suffixY = "pdf"
              } else if (suffix(file) === "json") {
                suffixY = "json"
              }
              uploadApi.getUpload({ bucketName: "notice", objectName: file.name }).then(res => {
                uploadApi.uploadFile({ url: res.data.uploadPath, file: file }, "application/" + suffixY).then(data => {
                  callback(res.data.downloadPath, { text: file.name })
                })
              })
            }
            input.click()
            // callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' })
          }
          if (meta.filetype === "image") {
            // callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' })
            // 要先模拟出一个input用于上传本地文件
            // var input = document.createElement("input")
            input.setAttribute("type", "file")
            // 你可以给input加accept属性来限制上传的文件类型
            // 例如：input.setAttribute('accept', '.jpg,.png')
            input.setAttribute("accept", ".jpg,.png,.jpeg,.svg")
            input.onchange = function (e) {
              var file = this.files[0]
              let suffixY = ""
              if (suffix(file) === "png") {
                suffixY = "png"
              } else if (suffix(file) === "jpg") {
                suffixY = "jpeg"
              } else if (suffix(file) === "gif") {
                suffixY = "gif"
              }
              uploadApi.getUpload({ bucketName: "notice", objectName: file.name }).then(res => {
                uploadApi.uploadFile({ url: res.data.uploadPath, file: file }, "image/" + suffixY).then(data => {
                  callback(res.data.downloadPath, { text: file.name })
                })
              })
            }
            input.click()
          }
          if (meta.filetype === "media") {
            // callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' })
            // // 要先模拟出一个input用于上传本地文件
            // var input = document.createElement("input")
            input.setAttribute("type", "file")
            // 你可以给input加accept属性来限制上传的文件类型
            // 例如：input.setAttribute('accept', '.jpg,.png')
            input.setAttribute("accept", ".mp4,.mov,.wmv,.flv")
            input.click()
            input.onchange = function () {
              var file = this.files[0]
              uploadApi.getUpload({ bucketName: "notice", objectName: file.name }).then(res => {
                uploadApi.uploadFile({ url: res.data.uploadPath, file: file }).then(data => {
                  callback(res.data.downloadPath, { text: file.name })
                })
              })
            }
            // callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' })
          }
        },
        // 多图片上传在富文本内展示的路径（全路径时为空）
        images_upload_base_path: "",
        images_upload_handler: function (blobInfo, succFun, failFun) {
          var file = blobInfo.blob() // 转化为易于理解的file对象
          // // 要先模拟出一个input用于上传本地文件
          var input = document.createElement("input")
          input.setAttribute("type", "file")
          // 你可以给input加accept属性来限制上传的文件类型
          // 例如：input.setAttribute('accept', '.jpg,.png')
          let suffixY = ""
          if (suffix(file) === "png") {
            suffixY = "png"
          } else if (suffix(file) === "jpg") {
            suffixY = "jpeg"
          } else if (suffix(file) === "gif") {
            suffixY = "gif"
          }
          uploadApi.getUpload({ bucketName: "notice", objectName: file.name }).then(res => {
            uploadApi.uploadFile({ url: res.data.uploadPath, file: file }, "image/" + suffixY).then(data => {
              succFun(res.data.downloadPath)
            })
          })

          // callback('http
        },
        toolbar_sticky: true,
        autosave_ask_before_unload: false
      }
    }
  },
  watch: {
    tinymceHtml: {
      handler(val) {
        if (this.contentDetails) {
          this.Html = this.contentDetails + val
        } else {
          this.Html = val
        }
        this.$emit("echoEditor", this.Html)
      },
      immediate: true,
      deep: true
    },
    contentDetails: {
      handler(val) {
        this.Html = val
        this.$emit("echoEditor", this.Html)
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    echoEditor(data) {
      this.$store.commit("setHtml", data)
    }
    // echoEditor() {
    //   this.Html = tinymce.activeEditor.setContent();
    //   this.$store.commit("setHtml", this.Html)
    // }
  }
}
</script>
  1. 在需要的位置引入上面这个vue文件，作为子组件使用
  1. 页面展示

三：富文本tinymce获取实时输入数据看这篇文章

juejin.cn/spost/74288...

相关推荐
IT_陈寒6 分钟前
React 19新特性实战：5个提升开发效率的技巧与避坑指南
前端·人工智能·后端
青衫码上行40 分钟前
【Java Web学习 | 第十篇】JavaScript(4) 对象
java·开发语言·前端·javascript·学习
CodeLongBear43 分钟前
第一次搭建个人主页+GitHub部署全记录：HTML/CSS/JS前端实现+留言板踩坑
前端·个人页面·部署上线
by__csdn43 分钟前
Node各版本的区别，如何选择版本以及与NPM版本对照关系
前端·npm·node.js
q***42821 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
Dontla1 小时前
React zustand todos案例（带本地存储localStorage、persist）todoStore.ts
前端·react.js·前端框架
阿珊和她的猫1 小时前
WebRTC 技术深度解析：实时通信的未来引擎
前端·webpack·node.js·webrtc
silence_xiang1 小时前
【React】首页悬浮球实现，点击出现悬浮框
前端·javascript·react.js
隔壁的大叔2 小时前
由于vite版本不一致，导致vue组件引入报错
javascript·vue.js
申阳2 小时前
Day 11：集成百度统计以监控站点流量
前端·后端·程序员
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件05Linux下V2Ray安装配置指南06BongoCat - 跨平台键盘猫动画工具07Labelme从安装到标注：零基础完整指南08智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践09《大数据技术原理与应用》实验报告三 熟悉HBase常用操作10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南