Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Richard Galt 64 posts 230 karma points
    Jan 15, 2021 @ 11:44
    Richard Galt
    0

    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

  • Chris Norwood 101 posts 546 karma points
    Jan 15, 2021 @ 15:09
    Chris Norwood
    0

    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

  • Richard Galt 64 posts 230 karma points
    Jan 22, 2021 @ 09:03
    Richard Galt
    0

    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

  • Richard Galt 64 posts 230 karma points
    Jan 22, 2021 @ 09:51
    Richard Galt
    0

    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()
    
  • Chris Norwood 101 posts 546 karma points
    Jan 22, 2021 @ 09:53
    Chris Norwood
    0

    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! :)

  • Chris Norwood 101 posts 546 karma points
    Jan 22, 2021 @ 10:27
    Chris Norwood
    101

    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 :).

  • Richard Galt 64 posts 230 karma points
    Jan 22, 2021 @ 11:54
    Richard Galt
    0

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

  • Bo Jacobsen 430 posts 1809 karma points
    Jan 22, 2021 @ 13:03
    Bo Jacobsen
    0

    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?

  • Chris Norwood 101 posts 546 karma points
    Jan 22, 2021 @ 13:06
    Chris Norwood
    0

    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.

  • Bo Jacobsen 430 posts 1809 karma points
    Jan 22, 2021 @ 14:48
    Bo Jacobsen
    1

    Thanks alot Chris :)

Please Sign in or register to post replies

Write your reply to:

Draft