zoukankan      html  css  js  c++  java
  • react 使用tinymce(图片上传、word复制、视频上传)

    1、引入tinymce

     npm install --save @tinymce/tinymce-react
    

    2、在public中引入tinymce的静态文件,下载地址:

    https://files.cnblogs.com/files/uimeigui/tinymce.zip

    //如果上述地址不能用,用官方的下载地址,官方下载,官方下载需要添加powerpaste到下载的tinymce的plugins中,这是word复制文件

      //在react的public的index.html中的head位置引入tinymce.min.js

    <head>
      <script src="./tinymce/tinymce.min.js"></script>//我的tinymce相对路径,填你们自己的
    </head>

    3、封装组件

    import React, { memo } from 'react';
    import { Editor } from '@tinymce/tinymce-react';
    import { update_img } from '../api/img'   //update_img是自己定义的上传图片视频方法,需要自行封装,很简单
    const Tinymce = memo((props) => {
      //上传内容改变,处理 let handleEditorChange = (content, editor) => { // console.log('Content was updated:', content); props.setarticleContentHandle(content) //props.父级的方法,自己定义 } //上传图片 let images_upload_handler = async (blob, success, fail) => { let param = new FormData(); param.append("img", blob.blob()); let data = await update_img(param);//update_img是自己定义的上传图片视频方法,需要自行封装,很简单 success(data.url); } //上传视频 let file_picker_callback = async (cb, value, meta) => { //当点击meidia图标上传时,判断meta.filetype == 'media'有必要,因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口 if (meta.filetype == 'media') { //创建一个隐藏的type=file的文件选择input let input = document.createElement('input'); input.setAttribute('type', 'file'); input.onchange = async function () { let file = this.files[0]; var formData; formData = new FormData(); //假设接口接收参数为file,值为选中的文件 formData.append('img', file); //正式使用将下面被注释的内容恢复 let data = await update_img(formData); //update_img是自己定义的上传图片视频方法,需要自行封装,很简单 // console.log(data); cb(data.url) } //触发点击 input.click(); } } let self = this; return ( <Editor initialValue={props.detail} //父组件传的值 apiKey="3gumwdw2xrvqkfci99fk6pqqqnfayhqg2c3w5scmzx9q9ymc" //可以到官网获取自己的 init={{ language: 'zh_CN', height: 500, menubar: false, images_upload_url: "/api/pc/upload/img", images_upload_base_path: "/api/pc/upload/img", images_upload_credentials: true, convert_urls: false, //这个参数加上去就可以了 file_picker_types: 'media', plugins: 'powerpaste textcolor 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', powerpaste_word_import: 'propmt', powerpaste_html_import: 'propmt', powerpaste_allow_local_images: true, paste_data_images: true, toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify| forecolor backcolor removeformat |image media numlist bullist | outdent indent | pagebreak | charmap emoticons | fu', video_template_callback: function (data, videoTemplateCallback) { return `<span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src='${data.source}' data-mce-p-width='${data.width}' data-mce-p-height='${data.height}' data-mce-p-controls="controls" data-mce-html="%20"> <video width='${data.width}' height='${data.height}' controls="controls"> <source src='${data.source}' type='${data.sourcemime}'></source> </video> </span>` }, images_upload_handler, file_picker_callback }} onEditorChange={handleEditorChange} /> ); }); export default Tinymce

     4、页面中使用

    //引入
    import Timymce from '../../components/tinymce'; //这是我的相对路径,填你们自己的
    
    //使用
    <Timymce setarticleContentHandle={(value) => setarticleContentHandle(value, 0)} detail={detail}></Timymce>
    
    //注释:setarticleContentHandle是自行定义修改值的方法,detail为富文本的值
    

      

     

  • 相关阅读:
    web页面与多页应用(布局示例普通文档流)
    web页面与多页应用(一)
    Flutter,webview里面实现上传和下载的功能
    Flutter项目删除了相关的dart文件之后运行flutter run或者 F5编译运行时会报这个错误.... were declared as an inputs, but did not exist. Check the definition of target:kernel_snapshot for errors
    vue项目中,点击输入框的时候,弹出的键盘挡住了输入框,需要把输入框展示在可见区域中,不被遮挡
    在IE浏览器上,min-hheight:unset/line-hight:unset不生效问题解决,把unset换成auto,问题只要时IE浏览器设置unset不生效
    本人修改了,需要把新的AndroidManifest.xml 覆盖原来的,AndroidManifest.xml 覆盖问题
    使用Filter来过滤掉需要排除的数组对象
    深拷贝和浅拷贝
    正则表达式
  • 原文地址:https://www.cnblogs.com/uimeigui/p/13716917.html
Copyright © 2011-2022 走看看