tinymce-react 自定义按钮

tinymce其他配置本文不做阐述，只针对本人遇到自定义按钮问题，展示代码。

//引入tinymce
import { Editor } from '@tinymce/tinymce-react';

<Editor
              apiKey="申请的apiKey"
              onEditorChange={handleEditorChange}
              init={{
                language: 'zh_CN',
                height: 800,
                toolbar_sticky: true,
                toolbar_mode: 'wrap',
                menubar: false,
                branding: false,
                placeholder: '在这里输入内容',
                block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
                fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
                font_formats:
                  '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
                images_upload_url: '/demo/upimg.php',
                images_upload_base_path: '/demo',
                content_style: 'img {max-width:100%;}',
                plugins: [
                  'advlist autolink lists link image charmap code print preview anchor',
                  'searchreplace visualblocks  fullscreen hr fontselect',
                  'insertdatetime media table paste wordcount ',
                ],
                toolbar: [
                  'undo redo | formatselect fontsizeselect fontselect | 
                    bold italic forecolor backcolor |removeformat hr 
                    | mybutton', //别忘记注册按钮名称
                ],
                setup(ed) {
                    //重点在这
                  ed.ui.registry.addButton('mybutton', {
                    text: '按钮名称',
                    onAction: () => {
                        //后续逻辑
                    }
                  })
                }
              }}
            />

 

 

如果要追加内容的话，需要用到ref 方法

import React, { FC, useState, useEffect, useRef } from 'react';

import { Editor } from '@tinymce/tinymce-react';

const Demo=()=>{
    const addBtn = useRef(null);

    // 追加内容方法
    const setCont =()=>{
        const ed: any = addContent.current
          ed.editor.selection.setContent('要追加的内容')
    }

    retrun (
            <Editor
                apiKey="apiKey"
                onEditorChange={handleEditorChange}
                ref={addContent}
                init={{
                  language: 'zh_CN',
                  height: 800,
                  toolbar_sticky: true,
                  toolbar_mode: 'wrap',
                  menubar: false,
                  branding: false,
                  placeholder: '在这里输入内容',
                  block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
                  fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
                  font_formats:
                    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
                  images_upload_url: '/demo/upimg.php',
                  images_upload_base_path: '/demo',
                  content_style: 'img {max-width:100%;}',
                  plugins: [
                    'advlist autolink lists link image charmap code print preview anchor',
                    'searchreplace visualblocks  fullscreen hr fontselect',
                    'insertdatetime media table paste wordcount ',
                  ],
                  toolbar: [
                    'undo redo | formatselect fontsizeselect fontselect | bold italic forecolor backcolor |removeformat hr |mybutton',
                  ],
                  setup(ed) {
                    ed.ui.registry.addButton('mybutton', {
                      text: '按钮名称',
                      onAction: () => {
                        //后续逻辑
                      }
                    })
                  }
                }}
              />
    );
}