{title: 'None', value: ''}, {title: '表头', value: 'table_header'}, {title: '白色', value: 'table_row_white_background'}, {title: '灰色', value: 'table_row_gray_background'}

修改后富文本编辑器会多出以下选项

注意table_header等对应样式需要全局添加才起作用，如需在富文本编辑器也能看到效果，需要在prism.css文件里也加入对应样式

2、修改table插件源码，自动生成斑马纹表格

修改node_modules里tinymce>plugins>table>plugin.js源文件

//源文件558行左右
var fromTag = function (tag, scope) {
      var doc = scope || domGlobals.document;
      var node = doc.createElement(tag);
      return fromDom(node);
//修改后
var fromTag = function (tag, rowIndex, scope) {
      var doc = scope || domGlobals.document;
      var node = doc.createElement(tag);
      //新增内容，可以添加样式，样式同样需要全局添加；也可以直接修改
      if(tag == 'tr'){
        if(rowIndex == 0){
          node.className = "table_header"
        }else if((rowIndex - 1)%2 == 1){
          node.className = "table_row_gray_background"
      if(tag == 'td'){
        node.style.height = '35px'
        node.style.padding = '0 5px'
      return fromDom(node);
//源文件5801行左右
var tableRow = function () {
      return Element.fromTag('tr');
//修改后
var tableRow = function (rowIndex) {
      return Element.fromTag('tr', rowIndex);
//源文件5821行左右
var render$1 = function (rows, columns, rowHeaders, columnHeaders, renderOpts) {
      if (renderOpts === void 0) {
        renderOpts = DefaultRenderOptions;
      var table = makeTable();
      setAll$1(table, renderOpts.styles);
      setAll(table, renderOpts.attributes);
      var tbody = tableBody();
      append(table, tbody);
      var trs = [];
      for (var i = 0; i < rows; i++) {
        var tr = tableRow();
        for (var j = 0; j < columns; j++) {
          var td = i < rowHeaders || j < columnHeaders ? tableHeaderCell() : tableCell();
          if (j < columnHeaders) {
            set(td, 'scope', 'row');
          if (i < rowHeaders) {
            set(td, 'scope', 'col');
          append(td, Element.fromTag('br'));
          if (renderOpts.percentages) {
            set$1(td, 'width', 100 / columns + '%');
          append(tr, td);
        trs.push(tr);
      append$1(tbody, trs);
      return table;
//修改后
var render$1 = function (rows, columns, rowHeaders, columnHeaders, renderOpts) {
      if (renderOpts === void 0) {
        renderOpts = DefaultRenderOptions;
      var table = makeTable();
      setAll$1(table, renderOpts.styles);
      setAll(table, renderOpts.attributes);
      var tbody = tableBody();
      append(table, tbody);
      var trs = [];
      for (var i = 0; i < rows; i++) {
        //传递i，i为当前插入的行数
        var tr = tableRow(i);
        for (var j = 0; j < columns; j++) {
          var td = i < rowHeaders || j < columnHeaders ? tableHeaderCell() : tableCell();
          if (j < columnHeaders) {
            set(td, 'scope', 'row');
          if (i < rowHeaders) {
            set(td, 'scope', 'col');
          append(td, Element.fromTag('br'));
          if (renderOpts.percentages) {
            set$1(td, 'width', 100 / columns + '%');
          append(tr, td);
        trs.push(tr);
      append$1(tbody, trs);
      return table;
使用表格属性对话框设置表格，设置默认值：
 
//源文件6004行左右
var open$2 = function (editor, isProps) {
      var dom = editor.dom;
      var tableElm, colsCtrl, rowsCtrl, classListCtrl, data = {}, generalTableForm;
      if (isProps === true) {
        tableElm = dom.getParent(editor.selection.getStart(), 'table');
        if (tableElm) {
          data = extractDataFromElement$2(editor, tableElm);
      } else {
        colsCtrl = {
          label: 'Cols',
          name: 'cols',
          value: '1'//列默认值
        rowsCtrl = {
          label: 'Rows',
          name: 'rows',
          value: '1'//行默认值
      if (getTableClassList(editor).length > 0) {
        if (data.class) {
          data.class = data.class.replace(/\s*mce\-item\-table\s*/g, '');
        classListCtrl = {
          name: 'class',
          type: 'listbox',
          label: 'Class',
          values: Helpers.buildListItems(getTableClassList(editor), function (item) {
            if (item.value) {
              item.textStyle = function () {
                return editor.formatter.getCssText({
                  block: 'table',
                  classes: [item.value]
      generalTableForm = {
        type: 'form',
        layout: 'flex',
        direction: 'column',
        labelGapCalc: 'children',
        padding: 0,
        items: [
            type: 'form',
            labelGapCalc: false,
            padding: 0,
            layout: 'grid',
            columns: 2,
            defaults: {
              type: 'textbox',
              maxWidth: 50
            items: hasAppearanceOptions(editor) ? [
              colsCtrl,
              rowsCtrl,
                label: 'Width',
                name: 'width',
                value: '100%',//表格宽默认值
                onchange: curry(Helpers.updateStyleField, editor)
                label: 'Height',
                name: 'height',
                onchange: curry(Helpers.updateStyleField, editor)
                label: 'Cell spacing',
                name: 'cellspacing',
                value: '0'//外边距
                label: 'Cell padding',
                name: 'cellpadding',
                value: '0'//内边距
                label: 'Border',
                name: 'border',
                value: '1'//边框宽度
                label: 'Caption',
                name: 'caption',
                type: 'checkbox'
            ] : [
              colsCtrl,
              rowsCtrl,
                label: 'Width',
                name: 'width',
                onchange: curry(Helpers.updateStyleField, editor)
                label: 'Height',
                name: 'height',
                onchange: curry(Helpers.updateStyleField, editor)
            label: 'Alignment',
            name: 'align',
            type: 'listbox',
            text: 'None',
            values: [
                text: 'None',
                value: ''
                text: 'Left',
                value: 'left'
                text: 'Center',
                value: 'center'
                text: 'Right',
                value: 'right'
          classListCtrl
      if (hasAdvancedTableTab(editor)) {
        editor.windowManager.open({
          title: 'Table properties',
          data: data,
          bodyType: 'tabpanel',
          body: [
              title: 'General',
              type: 'form',
              items: generalTableForm
            Helpers.createStyleForm(editor)
          onsubmit: curry(onSubmitTableForm, editor, tableElm)
      } else {
        editor.windowManager.open({
          title: 'Table properties',
          data: data,
          body: generalTableForm,
          onsubmit: curry(onSubmitTableForm, editor, tableElm)
                    快速实现方法包括：1、使用table插件自带配置属性table_row_class_list自定义行属性类型tinymce.init({    selector: '#tinydemo',    plugins: "table",    toolbar: "table",    table_class_list: [        {title: 'None', value: ''},        {title: '表头', value: 'table_header'},     
				
项目中需要用到在线填写表格的功能，我选择使用了TinyMCE，TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器，这里做了一个小demo，页面如下：
第1步：引入TinyMCE脚本
首先我们需要下载一份源文件放在本地，点这里下载，下载社区版即可，下载好之后放入public的static文件目录下，并在html文件中引入：
<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script&g
				
项目中原本使用的富文本编辑器是 wangEditor，这是一个很轻量、简洁编辑器
但是公司的业务升级，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：
UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲
bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery......
				
一个简单的斑马纹表格，通过IE6/7/8、firefox、opera等浏览器测试。如果页面上有大量的表格数据时，隔行变色的斑马纹，基于jquery中的强大的选择器nth-child，以及addClass向表格中添加css样式制作的DEMO。
漂亮的斑马纹table表格(基于JQuery斑马纹表格)demo的特点简单易用，代码中有简单的注释，下载即可用。
提示， jquery 与mootools存在一定的冲突，jquery与mootools混合的环境未测试过，不一定保证可正常使用
				
自定义inymce富文本编辑器列表，可以通过以下几个步骤实现：
1、配置中，加入lists和advlist插件，toolbar加入有序列表numlist或者无序列表bullist。
plugins: 'lists, advlist', 
toolbar: 'bullist numlist'
2、自定义列表的样式，在配置对象中，有序列表设置advlist_number_styles属性，无序列表设置advlist_bullet_styles属性。
advlist_bullet_styles: 'd
这个Tinymce富文本编辑器是vue-element-admin内集成好的，使用过后体验非常不错，很简单易用。这里分享一下，同时又看到了网上帖子都没什么人写前后端同时展示的，很多人想知道编辑器编辑的文章格式展示在前端的。这里统一写一下前后端代码都展示，并配上注释，相信大家看起来会很清晰明了。
编辑文章的时候，我是直接百度搜了一个小说复制了一段直接粘贴来的，格式还可以自动保留
文章保存后，在页面展示格式也是存在的
编辑器样式：鼠标移上去都会有功能介绍，功能很全
1，git下载
				
<el-table
    :cell-style="cellStyle"
    :header-cell-style="{ color: '#fff', background: 'rgba(78, 131, 211, 0.8)' }"
    :data="tableData"
    style="width:100%;color:white;"
  </el-table>
:header-cell-style是表头的样式设置
:cell-style就是斑马纹表格..
                    录完的数据就还是用recorder对象获取[code=javascript]
recorder.stop();
					console.log('record finish，MP3 exporting...');
					let getMp3Blobing = new Promise((resolve, reject) => {
						recorder.getMp3Blob((blob) => {
							console.log('MP3 export succeed');
              mp3Blob = blob;
							this.audioUrl = URL.createObjectURL(mp3Blob)
							resolve('get url successful')
					}).then((result) => {
						console.log(result)
[/code]
                网页版一键录制并发送语音（基于flash，兼容IE）
                    Shasha_Cheng: 
                    您好，我还想问您一下，就是录完音的数据放到哪里了，是哪个参数呢
                网页版一键录制并发送语音（基于flash，兼容IE）
                    不会敲代码的小liu: 
                    没出现过这个问题，不过错误提示你的对象是null，控制台输出看下你的实例是否创建成功