tinymce can you prepend append table tags - Using Umbraco and getting started

Richard Galt 64 posts 230 karma points

Jan 15, 2021 @ 11:44

TinyMce - can you prepend / append table tags?

I wonder if someone can help please.

I would like to prepend table tags generated by users using the TinyMce table tool so ultimately the html will look like:

<div class="table-responsive">
<table class="table">
</table>
</div>

Can this be done through the customConfig section in the tinyMceConfig.config?

I have managed to add the table class to the table tag doing this:

  <config key="table_default_attributes">{ "border" : "0", "class": "table"}</config>

Any help would be much appreciated.

Thanks

Rich

Copy Link

Chris Norwood 131 posts 642 karma points

Jan 15, 2021 @ 15:09

I don't think you can do that via the config, but you could add a template with the settings so your users can just insert the values?

Templates aren't on by default in tincyMCE but you can turn them on fairly simply in the tinyMceConfig.config file - in the "commands" list add:

<command alias="template" name="Templates" mode="All"></command>

Then in the "plugins" element add:

<plugin>template</plugin>

And in your custom config element something like:

<config key="templates">/App_Plugins/TinyMceTemplates/templates-config.html</config>

For the location of the templates config - templates-config.html is a JSON array to let you add templates, something like:

[{"title" : "Table", "description": "A responsive table ", "url": "/App_Plugins/TinyMceTemplates/template-responsive-table.html"}]

And then in the same directory, create the template-responsive-table.html file with your placeholder HTML in it:

<div class="table-responsive">
<table class="table">
</table>
</div>

Remember that you'll need to enable the templates in the data type where you want to use it!

There's a post here about it that's got more details!

https://our.umbraco.com/forum/using-umbraco-and-getting-started/103981-tinymce-templates-in-umbraco-8

Copy Link

Richard Galt 64 posts 230 karma points

Jan 22, 2021 @ 09:03

Hi Chris,

Sorry for the delay in responding and thankyou for taking the time to explain this.

I will attempt this today as it will certainly save a lot of grief in the long run.

All the best

Rich

Copy Link

Richard Galt 64 posts 230 karma points

Jan 22, 2021 @ 09:51

Hi Chris,

I've tried adding this to Umbraco 7 but get the following error when going in to the Richtext Editor datatype:

at Umbraco.Web.PropertyEditors.RichTextPreValueController.EnsureInit()
   at Umbraco.Web.PropertyEditors.RichTextPreValueController.GetConfiguration()
   at lambda_method(Closure , Object , Object[] )
   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.<>c__DisplayClass6_1.<GetExecutor>b__3(Object instance, Object[] methodParameters)
   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.Execute(Object instance, Object[] arguments)
   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ExecuteAsync(HttpControllerContext controllerContext, IDictionary`2 arguments, CancellationToken cancellationToken)
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Controllers.ApiControllerActionInvoker.<InvokeActionAsyncCore>d__1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Controllers.ActionFilterResult.<ExecuteAsync>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.AuthorizationFilterAttribute.<ExecuteAuthorizationFilterAsyncCore>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.AuthorizationFilterAttribute.<ExecuteAuthorizationFilterAsyncCore>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Dispatcher.HttpControllerDispatcher.<SendAsync>d__15.MoveNext()

Copy Link

Chris Norwood 131 posts 642 karma points

Jan 22, 2021 @ 09:53

Hi Richard,

I think the configuration was a little bit different in V7 - apologies! I still have a v7 project here with it set up though - I have a call shortly but I'll take a look straight after! :)

Copy Link

Chris Norwood 131 posts 642 karma points

Jan 22, 2021 @ 10:27

In v7 in tinyMceConfig I have the following configuration: In the commands element:

<command>
          <umbracoAlias>Templates</umbracoAlias>
          <icon>images/editor/template.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="template">template</tinyMceCommand>
          <priority>19</priority>
</command>

In the plugins element:

<plugin loadOnFrontend="true">template</plugin>

Then in customConfig:

<config key="templates">/App_Plugins/TinyMceTemplates/templates-config.html</config>

In the file ~/App_Plugins/TinyMceTemplates/templates-config:

[
{"title": "Checked List", "description": "Unordered bullet list using Tick iconography", "url": "/App_Plugins/TinyMceTemplates/template-checkedList.html" },
{"title" : "Image with Text", "description": "A image and text side-by-side (useful for page sections)", "url": "/App_Plugins/TinyMceTemplates/template-imagewithtext.html"}
]

And in the first of those (the checked list):

<ul class="tick-list-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Hope that helps! I'm a bit busy today but will check back tomorrow if you have any more issues :).

Copy Link

Richard Galt 64 posts 230 karma points

Jan 22, 2021 @ 11:54

Thanks Chris for all the help. That works great :)

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Jan 22, 2021 @ 13:03

Hi Chris.

If only i knew this 4 years ago :D

Where do you put the <icon>images/editor/template.gif</icon> in order for it to work?

Does the <config key="templates"> need to be html or is it just a typo?

Do you know if its the same way to do it in v8?

Copy Link

Chris Norwood 131 posts 642 karma points

Jan 22, 2021 @ 13:06

Hi Bo,

Version 8 instructions are above in the thread (I didn't realise Richard was using V7) - link below:

https://our.umbraco.com/forum/using-umbraco-and-getting-started/104753-tinymce-can-you-prepend-append-table-tags#comment-326938

There's no .gif file for that one - I think it's automatic in V8, it gets it from the plug-in directory I assume :)

Thanks,

Chris.

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Jan 22, 2021 @ 14:48

Thanks alot Chris :)

Copy Link

is working on a reply...

Flag this post as spam?

TinyMce - can you prepend / append table tags?