any tool in rich text editor for inserting image while adding text wrap around or setting a margin value

Press Ctrl / CMD + C to copy this to your clipboard.

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

0

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

Using Umbraco And Getting Started

Umbraco 9

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 1770 posts 6157 karma points MVP c-trib

Aug 26, 2022 @ 16:25

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

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
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?