react 中使用TinyMce

前端_阿亮

已于 2023-01-19 10:17:05 修改

阅读量1.6k

点赞数 1

文章标签：前端 react.js

于 2023-01-18 17:40:57 首次发布

本文链接：https://blog.csdn.net/qq_44844769/article/details/128728679

版权

TinyMCE是一个功能丰富的、持续更新的JavaScript富文本编辑器，适用于React、Vue和Angular等流行框架。它提供经典、行内和清爽三种模式，其中经典模式最为常见。文章详细介绍了如何配置编辑器，包括皮肤选择、工具栏定制、语言包设置等，并提供了基础配置和高级配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

中文文档: TinyMCE中文文档中文手册

官方文档: The Most Advanced WYSIWYG HTML Editor | TinyMCE

语言包:Language Packages | Trusted Rich Text Editor | TinyMCE

介绍:

tinymce是一款基础组件十分丰富，不断维护更新的富文本编辑器。在它的Github项目简介中如此描述自己：

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

简而言之: 我是宇宙第一的编辑器，我支持当前最流行的三个框架。

模式:

tinymce 有三种模式可选：经典模式(classic，默认)、行内模式(inline)、清爽模式(Distraction-free)。

经典模式是最常见的，也就是工具栏搭配输入区域，通过工具栏的按钮插入、修改、格式化内容，我们也选用这种模式作为业务的主要模式。

基础配置:

tinymce.init({
    selector: '#myTextarea',
    // 编辑器的皮肤，有 oxide oxide-dark
    skin: 'dark',
    // 编辑器宽高
    width: 600,
    height: 300,
    // 用到的插件
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste textcolor'
    ],
    // 编辑区域内容样式
    content_css: 'css/content.css',
    // 工具栏的配置项
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });

工具栏配置: 标红的为工具栏

通过init配置项toolbar和toolbar(n)来配置工具栏是否启用的工具和显示的顺序，使用 | 来分隔每个项

tinymce.init({
  selector: '#textarea1',  // change this value according to your HTML
  //启用工具栏并显示如下项
  toolbar: 'undo redo | styleselect | bold italic | link image',
})

tinymce.init({
  selector: '#textarea2',  // change this value according to your HTML
  //禁用工具栏
  toolbar: false,
})

/* 启用多个工具栏 */

tinymce.init({
  selector: '#textarea3',  // change this value according to your HTML
  // 启用多个工具栏
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright',
  ]
})

tinymce.init({
  selector: '#textarea4',  // change this value according to your html
  // 工具栏1
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  // 工具栏2
  toolbar2: 'alignleft aligncenter alignright',
})

话不多说，咱直接上代码这个是配置文件 config.js

export const tinyMceConfig = {
  placeholder: '请输入',
  statusbar: false, // 隐藏底部状态栏
  branding: false, // 隐藏tinymce右下角水印
  resize: false, //右下角调整编辑器大小，false关闭，true开启只改变高度，'both' 宽高都能改变
  height: 400, //高度
  language: 'zh_CN', //语言包
  menubar: false, //菜单栏设置隐藏
  content_style: 'p, div {font-size: 14px; margin: 0px; border:0px ; padding: 0px}', //文本内容中“p,div”标签进行行间距设置

  plugins: [
    'autolink',
    'link',
    'image ',
    'lists',
    'charmap',
    'preview',
    'anchor',
    'pagebreak',
    'visualblocks',
    'visualchars',
    'code',
    'fullscreen',
    'insertdatetime',
    'media',
    'nonbreaking',
    'table',
    'directionality',
    'emoticons',
    'template',
    'preview',
  ],
  toolbar: [
    ' bold underline italic alignleft aligncenter alignright | forecolor backcolor | fontfamily fontsize lineheight | bullist numlist outdent indent |emoticons link image media table code | undo redo | fullscreen',
  ],
  font_size_formats: '8px 10px 12px 14px 18px 24px 36px',
  font_family_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",
  line_height_formats: '1 1.2 1.4 1.6 2',
}