in tinyMCE I can add pictures to the text from the media section, but I would like to have some syling options to set width, height and floating of the pictures. Is there a way I can do that?
There are several approaches to achieve this, the best approach will depend on the complexity of the styles you need to apply, and any 'special' markup.
1) Create a stylesheet in the Umbraco backoffice, and then add this stylesheet to the configuration of your Rich Text Editor (there is a checkbox for each stylesheet on the Data Type configuration). Then underneath the stylesheet in the backoffice you can create new 'style' rules, specify a name for the rule, the css class or tag it affects, and some actual styling... now the editors will have a 'format' dropdown, and they can pick from the list to apply the style to content added in the rich text area.
https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Rich-Text-Editor/RTE-Styles/
Generally this custom stylesheet is 'just' for the backoffice - you would have to define the same styles in your front end build to apply them to your site. (sometimes it's useful to show the styles in a different way to an editor in the backoffice, eg if the font colour is white, or there is a background image...)
The downside of this approach is that the dropdown of formats doesn't take into consideration, which html element the cursor is currently in, all styles can be applied to all elements.
2) Another approach is to use TinyMce's way of adding custom styles to that same format dropdown, there is great article here explain how to do this with Umbraco:
Here you configure which styles are available, but also can state a 'selector' eg which html element the style can be applied to. So your 'Button' styles that make a link look like a button, can be tied down to only be attached to anchor tags, and not for example images...
The downside of this approach, is it applies to all Rich Text Editors in your site, and you might want different formats for different editors in different contexts (but quite often not).
3) If your custom styling involves applying very specific markup, then you can create a 'Macro':
The editor then chooses to insert the 'Macro' eg 'Responsive Image' you can then supply configuration of what content they need to provide, eg an Image Picker, or an option to align left or align right - and then in a Macro Partial View you can take these values, and have complete control over the html and css classes that wrap the content inserted into the rich text area.
Hello there Marc, thank you for your answer, I was able to configure style ;)
For the pics, can I then create a macro, that takes into input a media from the mediapicker, and some width and height, and floating styles? In order to make it work like in the tinymce editor demo ? https://www.tiny.cloud/docs/demo/full-featured/
Yes, either you can insert images via the image insert button in the rich text editor, and use the Formats dropdown to apply the float style, or you can create a Macro - which gives you full control of the markup around the image, and the editor can customise via Macro Parameters when the macro is inserted.
Create a Macro:
Create the Parameters
Implement the Macro in a Partial View Macro File, the gist of which will be something like this:
@using Umbraco.Web.Models
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
var imageId = Model.GetParameterValue<string>("relatedImage");
var imageGuid = GuidUdi.Parse(imageId);
var image = Umbraco.TypedMedia(imageGuid);
var hasImage = image != null;
var optionalCaption = Model.GetParameterValue<string>("optionalCaption");
var hasOptionalCaption = !String.IsNullOrEmpty(optionalCaption);
var imagePosition = Model.GetParameterValue<String>("imagePosition", "FullWidth");
var imageWidth = Model.GetParameterValue<int>("imageWidth", 0);
var imageHeight = Model.GetParameterValue<int>("imageHeight", 0);
if (imageWidth == 0 && imageHeight == 0)
{
imageWidth = 700;
imageHeight = 500;
}
//calculate any inline style based on width and height provided
var holdingDivWidthStyle = "style=\"width:auto;\"";
}
@if (hasImage){
<div class="image-@imagePosition" @Html.Raw(holdingDivWidthStyle)>
<img src="@image.Url" alt="@image.Name" class="img-responsive" />
@if (hasOptionalCaption){
<div class="caption">
<p>@optionalCaption</p>
</div>
}
</div>
}
And then editors can use the 'Macro' button to insert the image, and pick the image from the media section and set position, width, height etc from the parameters dialog:
How it then looks depends on how you implement the html in the Macro.
It's not the same as the TinyMce demo, though. In theory you can configure TinyMce in Umbraco with any of the Tiny Mce plugins (option 2 article above, is a great start) however you'd have to work out how to connect to draw the images from the Media section of Umbraco, whereas the Macro + Media Picker has that already worked out...
TinyMCE Img Styling
Hi guys,
in tinyMCE I can add pictures to the text from the media section, but I would like to have some syling options to set width, height and floating of the pictures. Is there a way I can do that?
Hi edge33
There are several approaches to achieve this, the best approach will depend on the complexity of the styles you need to apply, and any 'special' markup.
1) Create a stylesheet in the Umbraco backoffice, and then add this stylesheet to the configuration of your Rich Text Editor (there is a checkbox for each stylesheet on the Data Type configuration). Then underneath the stylesheet in the backoffice you can create new 'style' rules, specify a name for the rule, the css class or tag it affects, and some actual styling... now the editors will have a 'format' dropdown, and they can pick from the list to apply the style to content added in the rich text area. https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Rich-Text-Editor/RTE-Styles/
Generally this custom stylesheet is 'just' for the backoffice - you would have to define the same styles in your front end build to apply them to your site. (sometimes it's useful to show the styles in a different way to an editor in the backoffice, eg if the font colour is white, or there is a background image...)
The downside of this approach is that the dropdown of formats doesn't take into consideration, which html element the cursor is currently in, all styles can be applied to all elements.
2) Another approach is to use TinyMce's way of adding custom styles to that same format dropdown, there is great article here explain how to do this with Umbraco:
https://www.justnik.me/blog/umbraco-rte-styles-another-way
Here you configure which styles are available, but also can state a 'selector' eg which html element the style can be applied to. So your 'Button' styles that make a link look like a button, can be tied down to only be attached to anchor tags, and not for example images...
The downside of this approach, is it applies to all Rich Text Editors in your site, and you might want different formats for different editors in different contexts (but quite often not).
3) If your custom styling involves applying very specific markup, then you can create a 'Macro':
https://our.umbraco.com/Documentation/Reference/Templating/Macros/index-v7
The editor then chooses to insert the 'Macro' eg 'Responsive Image' you can then supply configuration of what content they need to provide, eg an Image Picker, or an option to align left or align right - and then in a Macro Partial View you can take these values, and have complete control over the html and css classes that wrap the content inserted into the rich text area.
Anyway hopefully that gives you some inspiration!
regards
Marc
Hello there Marc, thank you for your answer, I was able to configure style ;) For the pics, can I then create a macro, that takes into input a media from the mediapicker, and some width and height, and floating styles? In order to make it work like in the tinymce editor demo ? https://www.tiny.cloud/docs/demo/full-featured/
Hi edge33
Yes, either you can insert images via the image insert button in the rich text editor, and use the Formats dropdown to apply the float style, or you can create a Macro - which gives you full control of the markup around the image, and the editor can customise via Macro Parameters when the macro is inserted.
Create a Macro:
Create the Parameters
Implement the Macro in a Partial View Macro File, the gist of which will be something like this:
And then editors can use the 'Macro' button to insert the image, and pick the image from the media section and set position, width, height etc from the parameters dialog:
How it then looks depends on how you implement the html in the Macro.
It's not the same as the TinyMce demo, though. In theory you can configure TinyMce in Umbraco with any of the Tiny Mce plugins (option 2 article above, is a great start) however you'd have to work out how to connect to draw the images from the Media section of Umbraco, whereas the Macro + Media Picker has that already worked out...
regards
Marc
Sweet, I'll definitely try that out! Thank you Marc!
is working on a reply...