环境
- vue:3.2.13
- tinymce:6.3.1
快速引入
- 在public目录下创建js文件夹,将 tinymce 文件夹放入此中
- 前往官网下载中文js,放入 tinymce/plugins 文件中
- 在 index.html 中引入 tinymce.min.js,如下:
<script src="js/tinymce/tinymce.min.js" type="text/javascript"></script>
- 在vue文件中使用如下代码进行初始化
<template> <textarea id="text"> </textarea> <button @click="upload()">上传</button> </template> <script setup> import {onMounted} from "vue"; let editor; onMounted(async () => { editor = await tinymce.init({ selector: 'textarea#text', placeholder: "说点什么吧", language: 'zh-Hans', menubar: false, // plugins: "lineheight,kityformula-editor,wordcount,image,table," + // "media,link,insertdatetime,help,fullscreen,lists,advlist,anchor,charmap,code,codesample,directionality,emoticons", // toolbar: [ // 'undo redo emoticons bold italic underline forecolor backcolor ltr rtl hr bullist numlist table help', // 'file media link insertdatetime anchor charmap lineheight code codesample wordcount kityformula-editor fullscreen' // ], plugins:'code,table,autosave,lists,advlist,anchor,autolink,charmap,emoticons,insertdatetime,media,preview,quickbars,searchreplace,template,wordcount', toolbar: ['aligncenter | alignjustify | alignleft | alignnone | alignright | blockquote | backcolor | blocks | bold | copy | cut | fontfamily | fontsize | forecolor | h1 | h2 | h3 | h4 | h5 | h6 | newdocument | outdent | paste | pastetext | print | redo | remove | removeformat | selectall | strikethrough | styles | subscript | superscript | underline | undo | visualaid | code | restoredraft | bullist | anchor | link | charmap | emoticons | insertdatetime | media | preview | searchreplace | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | template | wordcount'], color_cols: 5, insertdatetime_formats: ["%H点%M分", "%Y年%m月%d日", '%Y年%m月%d日 %H点%M分'], textpattern_patterns:[ {start: '*', end: '*', format: 'italic'}, {start: '**', end: '**', format: 'bold'}, {start: '#', format: 'h1'}, {start: '##', format: 'h2'}, {start: '###', format: 'h3'}, {start: '####', format: 'h4'}, {start: '#####', format: 'h5'}, {start: '######', format: 'h6'}, {start: '1. ', cmd: 'InsertOrderedList'}, {start: '* ', cmd: 'InsertUnorderedList'}, {start: '- ', cmd: 'InsertUnorderedList' } ], automatic_uploads: false, images_upload_handler: (blobInfo, progress) => new Promise(resolve => { progress(100) // 在这里进行上传操作 并返回地址 console.log(2) resolve('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64()); }), file_picker_callback: function(callback, value, meta) { var input = document.createElement('input'); input.setAttribute('type', 'file'); var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'; switch(meta.filetype){ case 'media': filetype = '.mp3, .mp4, .avi, mpeg' break; case 'file': default: } input.setAttribute('accept', filetype); input.click(); input.onchange = function() { var file = this.files[0]; // 应当进行上传操作 console.log(file.name); } }, }) }) async function upload() { console.log(1) await editor[0].uploadImages() console.log(3, editor[0]) } </script> <style scoped> #text { width: 50vw; height: 50vh; } </style>
- 配置由 Q群 TinyMCE 兔818515594 中 网友 呆头呆脑 提供
js下载地址(天翼云盘):
© 版权声明
THE END
请登录后查看评论内容