3

Is there a way to wrap a <table> in a div with TinyMCE?

Preferably something natively by extending TinyMCE, I know I can get it to work with pure JS.

I was attempting to do something like this with no luck. (by following this doc: https://www.tiny.cloud/docs/configure/content-formatting/#formatparameters) But I can't seem to even get this to work:

$settings['formats'] = json_encode([
...
     "table" => [
            [
                "selector" => "table",
                "classes" => "test"
            ]
        ]
...
])

Ultimately I'd like to see the HTML output on the client side as:

<div class="my_class">
     <table> 
     ... 
     </table>
</div>
IHIutch
  • 71
  • 1
  • 6
  • Hi, did u figure out a solution to this? I have the same problem – Dan Sep 27 '21 at 22:34
  • Unfortunately, no – IHIutch Sep 29 '21 at 11:35
  • 1
    Same here. Couldnt find a way to extend it natively with TinyMCE, so I ended up using regex before outputting in my React component: `const editorContent = editorState.replace(/]*>[\s\S]*?<\/table>/g, '
    $&
    ')`
     – Dan Oct 25 '21 at 00:31

1 Answers1

0

I'm assuming you want this type of behavior to set a horizontal scroll onto the table.

If that was the case then here's what you can do.

<div class="w-[200px] overflow-hidden">
  <!-- 
    # Hack: Apply styles directly on the table.

    .table {
      display: block;
      overflow: auto;
    }
   -->
  <table class="table">
    <tbody>
      <tr>
        <td>+xx xxxxxxxxxx</td>
        <td>+xx xxxxxxxxxx</td>
        <td>+xx xxxxxxxxxx</td>
      </tr>
    </tbody>
  </table>
</div>
Devendra
  • 117
  • 2
  • 12