普歌:vue中使用elementUI+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接

普歌-码上鸿鹄团队:vue+elementUI+axios+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接

前言:在进行描述性项目时，项目后台是避免不了使用富文本编辑器，市面上的富文本很多，大概有这些

• wangEditor——基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费
• TinyMCE——TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。
• 百度UEditor——UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，功能齐全，可定制，注重用户体验等特点
• Kindeditor——界面经典。
• CKEditor
• Textbox——Textbox是一款极简但功能强大的在线文本编辑器，支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。
• Simditor——界面美观，功能较全
  以上是我搜罗的一些富文本编辑器，当然还有很多，我在项目中使用的是TinyMCE，开始吧

1. TinyMCE起步

• 1.我在网上找了很长时间关于如何在tinyMCE中上传图片，说各种的都有，但是对我没有很大的帮助。
• 2.这里先放上最后的效果图，一般写文章的需求都能实现，博客系统一般都用Markdown
  
• 3. TinyMCE的官网是英文，对英文基础要求比较高，所以这里放上TinyMCE中文文档,上面有针对官网优化后的配置代码

2.Vue中集成TinyMCE富文本编辑器

1. 第一步，在项目中下载TinyMCE
   npm install --save @tinymce/tinymce-vue
   
2. 第二步页面引入+注册组件

import Editor from "@tinymce/tinymce-vue";
import axios from "axios";

注册组件

//注册富文本编辑器
components:{
  Editor
}

3. 第三步在template中使用

<template>
    <div>
      
     <editor
         v-model="content"
         api-key="you-keys"
         :init="inits"
       />
     div>
template>

4. 第四步data中初始化配置以及设置图片上传,如果只需要上传图片的话到这就可以了

<script>
   data() {
   return {
       content:"",
        inits: {
              language: "zh_CN", //语言设置
              height: 500, //高度
              menubar: true, // 显示最上方menu菜单
              toolbar: true, //false禁用工具栏（隐藏工具栏）
              browser_spellcheck: true, // 拼写检查
              branding: false, // 去水印
              statusbar: false, // 隐藏编辑器底部的状态栏
              elementpath: false, //禁用下角的当前标签路径
              paste_data_images: true, // 允许粘贴图像
              toolbar:
                "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | code | ltr rtl",
              plugins:
                "print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons",
              // 图片上传
              //blobInfo是关于文件
              //success是成功调用
              //failure是失败调用
              images_upload_handler: function (blobInfo, success, failure) {
                  //这里注意要用var声明，我测试的时候不能用let和const
                  var formData = new FormData();
                  //添加参数
                  formData.append("file", blobInfo.blob());
                  axios.post("这里放文件上传地址", formData)
                     .then((response) => {
                       if (response.data.code == 20000) {
                          //success中
                          success(response.data.data.url);
                       } else {
                         failure("上传失败！");
                 }
            });
       },
     },
 }
}
script>

5. 上一步完成，已经可以使用图片上传了，下面还有一种自定义上传文件(可以上传自定义图片，视频)方式(vue中只需要把init里的配置项换了就行)

init:{
   selector: '#tinydemo4',
   language:'zh_CN',
   plugins: 'link',
   toolbar: 'link',
   file_picker_callback: function (callback, value, meta) {
       //文件分类
       var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
       //后端接收上传文件的地址
       var upurl='';
       //为不同插件指定文件类型及后端地址
       switch(meta.filetype){
           case 'image':
               filetype='.jpg, .jpeg, .png, .gif';
               upurl='图片上传路径';
               break;
           case 'media':
               filetype='.mp3, .mp4';
               upurl='视频上传路径';
               break;
           case 'file':
           default:
       }
       //模拟出一个input用于添加本地文件
       var input = document.createElement('input');
           input.setAttribute('type', 'file');
           input.setAttribute('accept', filetype);
       input.click();
       input.onchange = function() {
           var file = this.files[0];

           var xhr, formData;
           console.log(file.name);
           xhr = new XMLHttpRequest();
           xhr.withCredentials = false;
           xhr.open('POST', upurl);
           xhr.onload = function() {
               var json;
               if (xhr.status != 200) {
                   failure('HTTP Error: ' + xhr.status);
                   return;
               }
               //json是后端返回的数据
               json = JSON.parse(xhr.responseText);
                    console.log(json);
               if (!json || typeof json.data.url != 'string') {
                   failure('Invalid JSON: ' + xhr.responseText);
                   return;
               }
               callback(json.data.url);
           };
           formData = new FormData();
           formData.append('file', file, file.name );
           xhr.send(formData);

           //下方被注释掉的是官方的一个例子
           //放到下面给大家参考
           
           /*var reader = new FileReader();
           reader.onload = function () {
               // Note: Now we need to register the blob in TinyMCEs image blob
               // registry. In the next release this part hopefully won't be
               // necessary, as we are looking to handle it internally.
               var id = 'blobid' + (new Date()).getTime();
               var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
               var base64 = reader.result.split(',')[1];
               var blobInfo = blobCache.create(id, file, base64);
               blobCache.add(blobInfo);

               // call the callback and populate the Title field with the file name
               callback(blobInfo.blobUri(), { title: file.name });
           };
           reader.readAsDataURL(file);*/
       };
   },
};

• 下面是成功以后的效果
  
• 最后我们就可以拿着我们定义的content传给前台项目了

本文完结撒花，有帮到的伙伴感谢三连~~

更多推荐：wantLG的《普歌-码上鸿鹄：npm run dev启动项目报错module.exports = merge(prodEnv, {TypeError: merge is not a function…》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄团队:vue中使用elementUI+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。