Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Rahul 6 posts 76 karma points
    Aug 26, 2022 @ 15:16
    Rahul
    0

    Any tool in Rich Text Editor for inserting Image while adding text wrap around or setting a margin value

    We currently use the Media Picker option in Rich Text editor. The Media Picker, as it stands isn't very sophisticated and doesn't allow for positioning such as left/right alignment with text wrap around or setting a margin value etc. - which would allow spacing between the text and the image.

    Is there any other option in the text editor will be more sophisticated than the current tool, and will allow performing the above options without using the html code view ?

    Copy Link
  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Aug 26, 2022 @ 16:25
    Huw Reddick
    0

    yes, you can add a formatter(s) to either add classes or wrappers to your tags.

    You do so by adding "style_formats" which in v8 was quite simple however due to it now using the appsettings.json requires some rather ugly formatting :D

    Here is an example which adds several alignment options to img tags

      "Umbraco": {
      "RichTextEditor": {
        "CustomConfig": {
          "style_formats": "[{\"title\":\"Images\",\"items\":[{\"title\":\"Image Responsive\",\"selector\":\"img\",\"classes\":\"img-responsive\"},{\"title\":\"Image Center\",\"selector\":\"img\",\"classes\":\"img-center\"},{\"title\":\"Image Left - wrap text\",\"selector\":\"img\",\"styles\":{\"float\":\"left\",\"margin\":\"0 10px 0 10px\"}},{\"title\":\"Image Right\",\"selector\":\"img\",\"classes\":\"pull-right\",\"styles\":{\"margin\":\"0 10px 0 10px\"}},{\"title\":\"Image Right No Border\",\"selector\":\"img\",\"classes\":\"pull-right\",\"styles\":{\"margin\":\"0 10px 0 10px\",\"border\":\"0\"}},{\"title\":\"Image full-width\",\"selector\":\"img\",\"classes\":\"full-width-img\"}]}]",
        }
      }
}

    This will give you some format options like below

    enter image description here

    It's probably a lot easy to see if normal formatted json :) to give you an idea of what it does

    {
    "title": "Images",
    "items": [
        {
            "title": "Image Responsive",
            "selector": "img",
            "classes": "img-responsive"
        },
        {
            "title": "Image Center",
            "selector": "img",
            "classes": "img-center"
        },
        {
            "title": "Image Left - wrap text",
            "selector": "img",
            "styles": {
                "float": "left",
                "margin": "0 10px 0 10px"
            }
        },
        {
            "title": "Image Right",
            "selector": "img",
            "classes": "pull-right",
            "styles": {
                "margin": "0 10px 0 10px"
            }
        },
        {
            "title": "Image Right No Border",
            "selector": "img",
            "classes": "pull-right",
            "styles": {
                "margin": "0 10px 0 10px",
                "border": "0"
            }
        },
        {
            "title": "Image full-width",
            "selector": "img",
            "classes": "full-width-img"
        }
    ]
}
    Copy Link
  • Rahul 6 posts 76 karma points
    Aug 30, 2022 @ 08:08
    Rahul
    0

    Thanks Huw, this is a great solution and will cover most of the requirement. We can have some predefined options/formats for adding padding and alignment.

    Still, if the user wants to manually enter some random margin or padding value, currently he can only do that in the HTML code view. Though, please let us know if there is any such option/tool in Umbraco which can accomplish this as well.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft