November Happy Hour will be moved to Thursday December 5th.

TinyMce and image challenge

Vote:
 

Hi!

I am having some challenges regarding images in the TinyMCE-editor, and I am hoping you could help me:

1.The alignment options for image doesn't work out of the box, does it? What do I have to do to use it? 

2. The customer want to be able to add an image using the image button in the tinyMce editor. He should be able to choose a class for the image. I want to add custom classes to the "class" dropdown under the tab "apperearance". I have tried to add a TinyMCEPluginNonVisual-plugin with no luck. Is there a special location I should put the plugin-class? I put it under [projectroot]/Business/Plugins/ and put this in web.config:

The class looks like this:

  [TinyMCEPluginNonVisual(AlwaysEnabled = true,
    PlugInName = "advimage",
    DisplayName = "Init options",
    Description = "Init options for the HTML editor",
    EditorInitConfigurationOptions = @"{
          paste_auto_cleanup_on_paste : true,
          theme_advanced_styles : ""Image left=img-left;Image right=img-right;"",
          theme_advanced_resizing : true }")] 


    public class TinyMceSettings
    {
    }

3. The customer should be able to add a description and title for the image, and choose if the image should float to the left/right/middle. The title and description should appear somewhere next to the image, based on the class chosen.

I thought the best way to solve this, was to create a "text with image" block, and "textblock" that they could nest within the content area. But the cusomer has always used the image button in the tinymce editor, and want to continue doing that.

#172008
Nov 23, 2016 13:01
Vote:
 

Edit: Right. You already suggested creating it as a block. 

#172010
Edited, Nov 23, 2016 13:39
Vote:
 

Regarding #2. You don't need the web.config setting. But you need to enable the plugin, either in admin mode for all TinyMCE settings or from code.

[TinyMCEPluginNonVisual(AlwaysEnabled = true,
  PlugInName = "advimage",
  DisplayName = "Init options",
  Description = "Init options for the HTML editor",
  ServerSideOnly = true, // Otherwise Tiny tries to load a plugin js file as well
  EditorInitConfigurationOptions = @"{
        paste_auto_cleanup_on_paste : true,
        theme_advanced_styles : ""Image left=img-left;Image right=img-right;"",
        theme_advanced_resizing : true }")] 
 
 
  public class TinyMceSettings
  {
  }

And then some settings, please note IsDefault = true and NonVisualPlugins.

/// <summary>
/// The default settings for TinyMCE
/// </summary>
[ServiceConfiguration(ServiceType = typeof(PropertySettings))]
public class DefaultTinyMceSettings : PropertySettings<TinyMCESettings>
{
    /// <summary>
    ///     Initializes a new instance of the <see cref="DefaultTinyMceSettings" /> class.
    /// </summary>
    public DefaultTinyMceSettings()
    {
        this.IsDefault = true;
        this.DisplayName = "Default settings";
    }

    /// <summary>
    ///     Gets the identifier for this specific settings.
    /// </summary>
    /// <value>
    ///     The identifier.
    /// </value>
    public override Guid ID
    {
        get
        {
            return new Guid("9d776ac1-4dc7-4789-ac9c-124f34b8c275");
        }
    }

    /// <summary>
    ///     Gets the property settings.
    /// </summary>
    /// <returns>The property settings.</returns>
    public override TinyMCESettings GetPropertySettings()
    {
        return new TinyMCESettings
        {
            ContentCss = Constants.EditorCssPath,
            Width = 580,
            Height = 500,
            NonVisualPlugins = new[] { "advimage" },
            ToolbarRows = new List<ToolbarRow>
            {
                new ToolbarRow(new[]
                {
                    TinyMCEButtons.Bold,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.NumericList,
                    TinyMCEButtons.BulletedList,
                    TinyMCEButtons.Outdent,
                    TinyMCEButtons.Indent,
                    TinyMCEButtons.EPiServerQuote,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.Undo,
                    TinyMCEButtons.Redo,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.EPiServerLink,
                    TinyMCEButtons.Unlink,
                    TinyMCEButtons.Anchor,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.Image,
                    TinyMCEButtons.EPiServerImageEditor,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.PasteText,
                    TinyMCEButtons.CleanUp,
                    TinyMCEButtons.RemoveFormat,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.Code,
                    TinyMCEButtons.Fullscreen
                }),
                new ToolbarRow(new[]
                {
                    TinyMCEButtons.FormatSelect,
                    TinyMCEButtons.StyleSelect,
                    TinyMCEButtons.TableButtons.Table,
                    TinyMCEButtons.TableButtons.RowProperties,
                    TinyMCEButtons.TableButtons.CellProperties,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.TableButtons.InsertRowBefore,
                    TinyMCEButtons.TableButtons.InsertRowAfter,
                    TinyMCEButtons.TableButtons.DeleteRow,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.TableButtons.InsertColumnBefore,
                    TinyMCEButtons.TableButtons.InsertColumnsAfter,
                    TinyMCEButtons.TableButtons.DeleteColumns,
                    TinyMCEButtons.Separator,
                    TinyMCEButtons.TableButtons.SplitCells,
                    TinyMCEButtons.TableButtons.MergeCells
                })
            }
        };
    }
}

You can also create different settings and then specify them per property:

[PropertySettings(typeof(AMoreLockedDownTinyMceSettings))]
[Display]
public virtual XhtmlString MainIntro { get; set; }
#172018
Edited, Nov 23, 2016 15:45
Vote:
 

#3 is more tricky. If you use a block, then you can't float it, because blocks are always rendered as block elements and not inline in TinyMCE. Sometimes we add a token in the image's description field. E.g. the editor can add an alt text like this "This is the alt text caption=This will be the image caption". Then we render what's after caption= as a caption on the image. This can be done quite easy by adding your own display template for XthmlString and then use some regex to find images that has an alt text with "caption=" in them.

#172019
Nov 23, 2016 15:50
Vote:
 

Thank you!

I went for the solution to create an image with text-block and drag it into the xhtml field. It works fine. The only problem is if I try to move it to another place within the xhtml field, everything gets messed up. 

Do I have to create a ui descriptor or something? 

#172053
Nov 24, 2016 14:03
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.