devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue2+element 集成Tinymce_vue2 集成tinymce

作者：很楠不爱3 | 2024-06-18 05:40:07

赞

踩

vue2 集成tinymce

1、安装

cnpm i @tinymce/tinymce-vue tinymce --save

修改版本重装

  1.  "@tinymce/tinymce-vue": "^3.2.8",
  2.   "tinymce": "^5.4.1",

2、封装Editor.vue组件

  1. <template>
  2.   <div class="tinymce-editor">
  3.     <editor v-model="myValue"
  4.       :init="init"
  5.        :api-key="apiKey"
  6.       :disabled="disabled"
  7.      >
  8.     </editor>
  9.   </div>
  10. </template>
  11.  
  12. <script>
  13.   import {fileUpload} from '@/api/cms'
  14. import tinymce from 'tinymce/tinymce'
  15. import Editor from '@tinymce/tinymce-vue'
  16.  
  17. // import 'tinymce/themes/modern/theme'
  18. import 'tinymce/themes/silver/theme'
  19. import 'tinymce/icons/default/icons'
  20. import 'tinymce/plugins/image'// 插入上传图片插件
  21. import 'tinymce/plugins/media'// 插入视频插件
  22. import 'tinymce/plugins/table'// 插入表格插件
  23. import 'tinymce/plugins/link' //超链接插件
  24. import 'tinymce/plugins/code' //代码块插件
  25. import 'tinymce/plugins/lists'// 列表插件
  26. import 'tinymce/plugins/contextmenu' //右键菜单插件
  27. import 'tinymce/plugins/wordcount' // 字数统计插件
  28. import 'tinymce/plugins/colorpicker' //选择颜色插件
  29. import 'tinymce/plugins/textcolor' //文本颜色插件
  30. import 'tinymce/plugins/fullscreen' //全屏
  31. import 'tinymce/plugins/help' // 帮助
  32. import 'tinymce/plugins/charmap'
  33. import 'tinymce/plugins/paste'
  34. import 'tinymce/plugins/print' //打印
  35. import 'tinymce/plugins/preview' // 预览
  36. import 'tinymce/plugins/hr' // 水平线
  37. import 'tinymce/plugins/anchor'
  38. import 'tinymce/plugins/pagebreak'
  39. import 'tinymce/plugins/spellchecker'
  40. import 'tinymce/plugins/searchreplace'
  41. import 'tinymce/plugins/visualblocks'
  42. import 'tinymce/plugins/visualchars'
  43. import 'tinymce/plugins/insertdatetime'
  44. import 'tinymce/plugins/nonbreaking'
  45. import 'tinymce/plugins/autosave'
  46. import 'tinymce/plugins/fullpage'
  47. import 'tinymce/plugins/toc'
  48. import 'tinymce/plugins/advlist'
  49. import 'tinymce/plugins/autolink'
  50. import 'tinymce/plugins/codesample'
  51. import 'tinymce/plugins/directionality'
  52. import 'tinymce/plugins/imagetools'
  53. import 'tinymce/plugins/noneditable'
  54. import 'tinymce/plugins/save'
  55. import 'tinymce/plugins/tabfocus'
  56. import 'tinymce/plugins/textpattern'
  57. import 'tinymce/plugins/template'
  58.  
  59.  
  60.  
  61. export default {
  62.   components: {
  63.     Editor
  64.   },
  65.   props: {
  66.     //传入一个value，使组件支持v-model绑定
  67.     value: {
  68.       type: String,
  69.       default: ''
  70.     },
  71.     disabled: {
  72.       type: Boolean,
  73.       default: false
  74.     },
  75.     plugins: {
  76.       type: [String, Array],
  77.       default: 'lists image media table textcolor wordcount contextmenu preview'
  78.     },
  79.     toolbar: {
  80.       type: [String, Array],
  81.       default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat table'
  82.     }
  83.   },
  84.   data() {
  85.     return {
  86.       apiKey: 'jzlds2e6urz6akm9wxp4f70mnwg83d8fovsialqazxowyity',
  87.       //配置文件服务器的静态访问路径前缀
  88.       //static_web_preurl: 'http://localhost/files/hxzy_img/',
  89.       //初始化配置
  90.       init: {
  91.         placeholder: "在这里输入文字",
  92.         language_url: '/static/tinymce/langs/zh_CN.js',
  93.         language: 'zh_CN',
  94.         skin_url: '/static/tinymce/skins/ui/oxide',
  95.         height: 600,
  96.          end_container_on_empty_block: true,
  97.         powerpaste_word_import: 'clean',
  98.            advlist_bullet_styles: 'square',
  99.         advlist_number_styles: 'default',
  100.         imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
  101.         default_link_target: '_blank',
  102.         link_title: false,
  103.         media_live_embeds: true,
  104.         content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
  105.         nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
  106.         // plugins: this.plugins,
  107.         // toolbar: this.toolbar,
  108.         //@ts-nocheckplugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
  109.        plugins: 'advlist anchor autolink autosave code codesample colorpicker  contextmenu directionality  fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount',
  110.         //toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | table',
  111.       toolbar :['searchreplace bold italic underline strikethrough fontselect fontsizeselect  alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
  112.          font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
  113.         branding: false,
  114.         menubar: true,
  115.         file_picker_types: 'media',
  116.         //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
  117.         //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
  118.         images_upload_handler: async(blobInfo, success, failure) => {
  119.           //  let formdata = new FormData()
  120.           // formdata.set('file', blobInfo.blob())
  121.           let {url,name}= await  this.uploadFile( blobInfo.blob(), 'image');
  122.           success(url,{ title: name })
  123.           //this.handleImgUpload(blobInfo, success, failure)
  124.         },
  125.         file_picker_callback:  (cb, value, meta)=> {
  126.                   //当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
  127.                   if (meta.filetype == 'media'){
  128.                     //创建一个隐藏的type=file的文件选择input
  129.                     let input = document.createElement('input');
  130.                     input.setAttribute('type', 'file');
  131.                     input.setAttribute('accept', 'video/*');
  132.                     input.onchange = async(e)=>{
  133.  
  134.                       let file = e.path[0].files[0]//只选取第一个文件。如果要选取全部，后面注意做修改
  135.                       if(this.validateVideo(file)){
  136.                          let {url,name}= await  this.uploadFile( file, 'video');
  137.                         cb(url,{ title: name })
  138.                       }
  139.                     }
  140.                     //触发点击
  141.                     input.click();
  142.                   }
  143.         }
  144.       },
  145.       myValue: this.value
  146.     }
  147.   },
  148.   mounted() {
  149.     tinymce.init({})
  150.   },
  151.   methods: {
  152.     //校验视频
  153.     async validateVideo (file) {
  154.       const isMP4 = file.type === 'video/mp4'
  155.       const isLt3M = file.size / 1024 / 1024 < 3
  156.  
  157.       if (!isMP4) {
  158.         this.$message.error('上传视频必须为 MP4 格式！')
  159.  
  160.         return false
  161.       }
  162.  
  163.       if (!isLt3M) {
  164.         this.$message.error('上传视频大小限制 3M 以内！')
  165.  
  166.         return false
  167.       }
  168.  
  169.       // const duration = await this.getVideoDuration(file)
  170.       // if (duration > 60) {
  171.       //   this.$message.error('上传视频时长不能超过 60 秒！')
  172.  
  173.       //   return false
  174.       // }
  175.  
  176.       return true
  177.     },
  178.      /**
  179.      * @description 获取视频时长
  180.      * @param {File} file - 要上传的文件
  181.      * @returns {Promise<number>}
  182.      */
  183.     getVideoDuration (file) {
  184.       return new Promise(resolve => {
  185.         const videoElement = document.createElement('video')
  186.         videoElement.src = URL.createObjectURL(file)
  187.  
  188.         videoElement.addEventListener('loadedmetadata', () => {
  189.           resolve(videoElement.duration)
  190.         })
  191.       })
  192.     },
  193.     /**
  194.      * @description 上传文件
  195.      * @param {File} file - 要上传的文件
  196.      * @param {string} type - 文件类型
  197.      * @returns {Object}
  198.      */
  199.     async uploadFile (file, type = 'images') {
  200.        const loading = this.$loading({
  201.           lock: true,
  202.           text: 'Loading',
  203.           spinner: 'el-icon-loading',
  204.           background: 'rgba(0, 0, 0, 0.7)'
  205.         });
  206.       const formData = new FormData()
  207.       formData.append('file', file)
  208.  
  209.       // 注：此为调用后端上传接口，需根据实际情况进行调整
  210.       let res= await fileUpload(formData)
  211.       loading.close();
  212.       if(res.code !==1) return this.$message.error(res.$message)
  213.       return {
  214.         url: `${ROOT}/${res.data}`,
  215.          name: file.name
  216.       }
  217.     },
  218.     //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
  219.     //需要什么事件可以自己增加
  220.     // onClick(e) {
  221.     //   this.$emit('onClick', e, tinymce)
  222.     // },
  223.     //可以添加一些自己的自定义事件，如清空内容
  224.     clear() {
  225.       this.myValue = ''
  226.     },
  227.   },
  228.   watch: {
  229.     value(newValue) {
  230.       this.myValue = newValue
  231.     },
  232.     myValue(newValue) {
  233.       this.$emit('input', newValue)
  234.     }
  235.   },
  236.  
  237. }
  238.  
  239. </script>
  240. <style scoped>
  241. </style>

3、组件在弹框中使用

  1. <!-- :append-to-body="true" -->
  2.     <el-dialog
  3.       :title="dialogTitle"
  4.       v-dialogDrag
  5.       :append-to-body="true"
  6.       class="editor_dialog"
  7.       :visible.sync="dialogVisible"
  8.       width="70%"
  9.       @closed="editorDialogClose"
  10.     >
  11.       <el-form
  12.         :model="addForm"
  13.         :rules="rules"
  14.         ref="addForm"
  15.         label-width="100px"
  16.         class="demo-ruleForm"
  17.       >
  18.         <el-form-item label="文章标题" prop="title">
  19.           <el-input v-model="addForm.title"></el-input>
  20.         </el-form-item>
  21.         <el-form-item label="文章类型" prop="type">
  22.           <el-select v-model="addForm.dataDictionaryId" placeholder="请选择">
  23.             <el-option
  24.               v-for="item in options"
  25.               :key="item.id"
  26.               :label="item.dataText"
  27.               :value="item.id"
  28.             >
  29.             </el-option>
  30.           </el-select>
  31.         </el-form-item>
  32.         <el-form-item label="文章内容" prop="content">
  33.           <tinymce-editor
  34.             v-model="addForm.content"
  35.             ref="editor"
  36.             v-if="dialogVisible"
  37.           ></tinymce-editor>
  38.         </el-form-item>
  39.       </el-form>
  40.       <span slot="footer" class="dialog-footer">
  41.         <el-button @click="dialogVisible = false">取 消</el-button>
  42.         <el-button type="primary" @click="saveArticle">确 定</el-button>
  43.       </span>
  44.     </el-dialog>
  1. import TinymceEditor from "@/components/Editor.vue";
  2. components: {
  3.     TinymceEditor,
  4.   },

tips:

1、element弹框及遮罩层层级比较高需设置以下样式，选择文字颜色等子工具箱才显示 

  1. .tox-tinymce-aux{
  2.  
  3.   z-index: 2009!important;
  4.  
  5. }

2、假如配置了目录，需更改路径

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/733886
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。