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

一: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...

相关推荐
雪碧聊技术19 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了20 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down