Which editor is recommended for tables?

The CMS Questions
1

Hello.

I have just updated to Kirby 5. There was a break of several months in the project for an NGO. Now it’s continuing.

My navigation is already finished and working.

The users of the panel are not familiar with HTML.

Which editor would you recommend if the users want to enter data tables in a simple way?

Requirements: Insert empty table, add/delete rows/columns, merge cells, declare cells as TH, declare table caption.

What other requirements are there for the panel?

I would like to provide users with about a dozen HTML elements (block and inline) that they can insert by clicking on buttons.

Only these elements should be possible. The elements I provide should be able to contain attributes.

Thank you for your advice :slight_smile:

2

You might be able to do all that with the TinyMCE plugin TinyMCE Editor - Oweb Studio

It is not a free plugin though, I am not sure if @ahmetbora plans to update the plugin for Kirby 5 (the plugin page says its compatable with Kirby 4)

Alternatively there is another plugin GitHub - bogdancondorachi/kirby-table-field: 📈 Table field/block plugin for Kirby CMS

You could use that as a starting point and fork it to add the features you need on top of what it provides already.

3

@jimbobrjames

Thanks for your advice. As we are an NGO, we don’t have a budget, so I would prefer to find a free plugin. Of course, it is still possible to purchase a licence for one or the other plugin.

I can’t fork anything as I am not a programmer.

Are you sure that the TinyMCE editor can really be configured as I have outlined?

Perhaps I don’t yet understand the native capabilities of the panel. Maybe what I want can be done without a plugin.

Inline examples:

<strong>
<em>
<span class="lorem">
<img>

Beispiel Blocklevel:

<h2>
<h3>
<ol><li>
<ul><li>
<p class="ipsum">
<p>
<figure>
<figcaption>

It would probably be best if we consider the two tasks, “table” and “editor”, separately in this thread, as this will make things clearer. I need a customisable editor, so to speak, or individual buttons for each element.

4

I have not used TinyMCE within Kirby but i have used it with other CMS systems, albeit some years ago. It is pretty decent and you can play around what a demo of it that has eveything turned on on the TinyMCE website. Full featured demo: Non-Premium Plugins only | TinyMCE Documentation

The second plugin i mentioned above is free and open source.

I think we are talking about two seperate things now. I riginally understood that you wanted to be able to add those inline elements with the table content.

If you kirby blocks you can allow editor to add a table and then add a content block after wards.

The kirby textare feild ( Textarea | Kirby CMS ) accepts markdown (Markdown Cheat Sheet | Markdown Guide) or you can use the buttons on its tool bar to do common things. However im not sure you can add attributes with basic Markdown. However i belive you can be enabling markdown extra.

THe markdown syntax in the textarea field will get converted into HTML when it outputted in a PHP template.

5

The table field does not support all the table features you require (in particular not merging cells).

I doubt that there is an editor plugin for Kirby that supports such advanced table features, at least I’m not aware of one.

As regards the editor features, you could use the blocks field, but to be able to add custom attributes to any element, that would require custom extensions.

1 Like
6

@texnixe

Hi Sonja.

Thank you, it certainly helps me to know that there are no solutions for certain tasks. Then I will temporarily write the data tables as HTML source code. That way, I can take my time to look for a pragmatic solution.

If you want to combine fields (i.e. HTML block structure defined in Blueprints) with HTML source code, what method do you recommend? Please forgive my sometimes awkwardly worded questions. They show you that I still lack a lot of basic knowledge of Kirby.

Andreas

PS: I saw that Bastian will be speaking at “beyond tellerrand” at 6th of November. I’m looking forward to the talk. And to perhaps meeting some of the community in person : )

7

There is another option but im not sure it will work well with your panel users as you mentioned they are not familiar with HTML etc.

However, it is possible to transform CSV files into html tables via a file upload in the panel. Therefore all the editing is done within the spreadsheet program (Libreoffice, Excel, Numbers etc). They just need remeber to replace the file in file upload panel if they need to make changes to a table thats already been added.

Its not as slick as a visual editor of course, but it might be a way forward until you find a more visual / interactive solution.

8

Thanks for the interesting idea, James.

I know the skills of my five users well. They will not be able to use such a tool chain.

In my humble opinion, a potentially powerful (i.e. including data tables) and fully customisable graphical editor would be an asset to Kirby.

But I say this with all due modesty as a newbie. In my view, it’s about striking a balance between quality control of the HTML by the admin AND enabling panel users to create non-trivial HTML structures. Not an easy task.

9

Such a full featured table editor is something ive wanted for quite along time with Kirby, and i know im not alone on that idea in the community, but my skills in creating a complex table editor for the panel are limited. I am more of a designer / coder rather then a back end developer. Whilst i have made quite a few plugins for kirby, i thnk this one is probably out of my depth.

But you are absloutly right, its not an easy task!

1 Like
10

If you don’t strictly require full flexibility to visually design any kind of table, there might be other ways to solve it. It depends on what kind of tables we are talking about — but often what will be in the end rendered as a table on the front end, doesn’t need to be entered in a tabular format to make sense. But then we need to set some known limits or presets .

If you can settle on to have a few different table variants (with different number of columns) to choose from, then you can use kirby’s Structure Field (which let’s you fill in multiple rows, and visually look a table). Depending on which table variant the editor selects, you conditionally show a different Structure Field (with different amount of fields to fill). Non repeating fields like caption is entered separately in text fields. In the template it will be easy to output the structure field as a table by looping over the rows.

You also have flexibility to use the data in other ways in your templates — instead of storing it as a preformatted html table that only can be used as is.

11

Thank you for your thoughts, Tim : )

First of all, I am really only concerned with data tables that are to be displayed normally as data tables on the website.

My motive is not to provide another of presentation on the website.

I would like to provide my users with a purely graphical UI that is easy to use. Just as easy as they are used to from a spreadsheet.

Let’s assume I do without the feature of connecting cells.

What then remains as a requirement for the interface:

thead
tbody
th
td
caption
scope=row
scope=column

A sorting function would be very practical.

A completely different solution, which I consider to be very user-friendly:

Importing a table from Google Sheets directly into the panel at the click of a button. This avoids complicated multi-step export/import processes or even an intermediate step with CSV.

This would be too much for my users.

Then you could simply edit the required data table in the familiar Google Sheets interface.