2025-04-01T19:08:36.0000000Zhttps://world.optimizely.com/blogs/grzegorz-wiechec/ Optimizely World <p>Today we released a new version of the TinyMCE editor. The <a title="TinyMCE Nuget package" href="https://nuget.optimizely.com/package/?id=EPiServer.CMS.TinyMce&amp;v=5.0.0">EPiServer.CMS.TinyMce 5.0.0</a> package includes integration with the latest version of the&nbsp;<a title="TinyMCE documentation " href="https://www.tiny.cloud/docs/tinymce/7/">TinyMCE 7</a> library.</p> <p><img src="/link/2295ce469d7948808fe93d6fb258b04c.aspx" alt="Optimizely TinyMCE 7 overview" width="797" height="718" /></p> <h2>Upgrade information</h2> <p>In this release we haven't added new functionalities, it's only the TinyMCE library migration. The package has been released as version 5 and not a continuation of version 4, because the TinyMCE library has minor breaking changes.</p> <p><span style="text-decoration: underline;"><strong>But for most Optimizely installations using the 4.x version integration you won't need to make any code changes when upgrading.</strong></span></p> <p>There are no server-side configuration changes. Adding plugins and setting up the toolbar remains unchanged. All editor configuration changes that need to be made are described in the TinyMCE <a href="https://www.tiny.cloud/docs/tinymce/latest/migration-from-6x/">migration documentation</a>.</p> <p>The TinyMCE 6 and TinyMCE 7 API are almost the same.</p>2025-04-01T19:08:36.0000000Z

Blog post

<p>Content Folders, which are located in assets pane gadget or multichannel content gadget, allow you to add any type of block or folders. But sometimes, for specific folders, we would like to store only one type of content and additional folders used for example for clustering or grouping. In this article, I will describe how [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/08/create-custom-folder-type-in-edit-mode/">Create custom folder type in Edit Mode</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-08-28T17:59:43.0000000Z

Blog post

<p>After publishing my last article about copying property values to other language versions, I received constructive feedback on how could I change the script. In this article I would like to describe changes that will improve the way the add-on works. The previous version had some significant limitations: it was not possible to change a [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/06/copying-property-values-part-2/">Copying property values part 2</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-06-18T20:43:20.0000000Z

Blog post

<p>In this article I&#8217;d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts about reverting property to a specific version I described how to update property value using property from another version. Today I&#8217;d like to show the oposite scenario. We would like [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/06/copying-property-values/">Copying property values</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-06-08T10:22:05.0000000Z

Blog post

<p>This article will be continuation of the previous series about TinyMCE extensions. Today I would like to describe an add-on that allows inserting dynamic fields (macro) into TinyMCE editor that are replaced with custom value when rendering the page. Macro support In the image above, when the page is rendered, the %%%USER_NAME%%% field will be [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/06/extendedcms-tinymceenhancements-marco-support/">ExtendedCms.TinyMceEnhancements &#8211; marco support</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-06-03T07:33:56.0000000Z

Blog post

<p>Today I will introduce another small feature of TinyMceEnhancements plugin. The functionality is used to automatically detect whether a browser supports the webp format. Using extension With this option, plug-ins such as imageSharp can change the image format from JPG to web. The extension uses the GeneratedUrl event from the IContentUrlGeneratorEvents service, which is available [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/05/extendedcms-tinymceenhancements-serwer-side-webp-support/">ExtendedCms.TinyMceEnhancements &#8211; serwer side webp support</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-05-22T21:46:53.0000000Z

Blog post

<p>In my previous post I showed Full Width for TinyMCE. In this article I will describe another feature for ExtendedCms.TinyMceEnhancements addon, supporting video tag. Optimizely integration supports adding links, images and content from Assets Pane. With TinyMceEnhancements you can also add video files. Plugin will use video tag when files has mp4, webm or ogg [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/02/enhancements-for-tinymce-support-for-video-tag/">ExtendedCms.TinyMceEnhancements – support for video tag</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-02-19T08:28:31.0000000Z

Blog post

<p>Recently I introduced TinyMceEnhancements addon for Optimizely TinyMCE integration. Today I&#8217;d like to introduce another enhancement Full Width TinyMCE. All Optimizely properties have very similar width. This width is suitable for fields such as ContentReference or short text, but often the TinyMCE property used to store the main content of an article contains much more [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/02/enhancements-for-tinymce-full-widthtinymce/">Enhancements for TinyMCE &#8211; Full WidthTinyMCE</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-02-12T09:13:47.0000000Z

Blog post

<p>In this article I&#8217;d like to describe my new plugin for TinyMCE integration. The TinyMceEnhancements addon contains set of improvements for Optimizely TinyMCE integration. It focus on features related with images used in the HTML editor. Using this plugin you can modify the attributes of images, limit the size and set ALT text. Managing image [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/02/enhancements-for-tinymce-tinymceenhancements-plugin/">Enhancements for TinyMCE &#8211; TinyMceEnhancements plugin</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2024-02-02T17:08:37.0000000Z

Blog post

<p>A few versions ago, Optimizely CMS added inline blocks functionality. This is a very useful feature which enables the Editor to create dynamic pages using ContentArea. The publishing cycle of blocks is related to the page on which they are used, so editing has become very easy. In this article, I wanted to describe a [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/12/copying-inline-blocks-when-translating-pages/">Copying inline blocks when translating pages</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-12-13T21:10:02.0000000Z

Blog post

<p>The Optimizely CMS has built-in DateTime property. When editing, the Editor selects both the date and the time. Sometimes we would like to configure only the date selection, e.g. for calendar events, employee-related dates, article release date etc. Therefore, I have prepared a simple date property editor. Below is the default DateTime property. The difference [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/12/date-property/">Date property editor</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-12-09T11:37:50.0000000Z

Blog post

<p>In this article, I will show simple code that allow to replace linked content with other content selected by the Editor. When deleting content whose references are used by other content, the Editor is shown a dialog box with a list of references. The Editor has the option to visit the page or block where [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/12/update-related-content/">Update related content</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-12-08T22:46:45.0000000Z

Blog post

<p>Recently, in <a href="https://nuget.optimizely.com/package/?id=EPiServer.CMS.UI&amp;v=12.23.0">EPiServer.CMS.UI 12.23.0</a>, we&rsquo;ve updated designs for the content types edit view in Admin Mode.</p> <p>It's important to mention, that no functionality has been removed, and there are no breaking changes as a result of these updates, functionally everything is working in the same way. We have just reorganized the layout to be more user friendly and consistent with other modules.</p> <p>Content types have a lot functionality to configure. We grouped them into a few clear sections: Properties, Details, Default Values, Child Content Types, Permissions and Settings. I will describe them one by one.</p> <h2>Properties</h2> <p>The properties section displays a list of properties that belongs to the edited content type. It allows to search and filter properties. From the list, Administrator can create and edit properties.</p> <p><img src="/link/cea6d57949c042b094a277be79492d95.aspx" width="1076" height="604" /></p> <h2>Details</h2> <p>The "details" section contains basic, non-editable information about the content type, like GUID, created date and model type name. This section allows you to check database related fields and helps with troubleshooting.</p> <p><img src="/link/51f788fd302a4dd69e144b12d0488717.aspx" width="1078" height="328" /></p> <h2>Default values</h2> <p>The "Default Values" section allows you to configure default settings for pages, like sort order or publishing rules. This section is available only for Page Types.</p> <p><img src="/link/869f5e1ea68f47839cf046edaabf880c.aspx" width="1082" height="608" /></p> <h2></h2> <h2>Child content types</h2> <p>The Child content types section allows you to define which content type instances can be created as children of the content type.</p> <p><img src="/link/ca6da582f9164d76b1441d0a312ad76b.aspx" width="1090" height="613" /></p> <h2></h2> <h2>Permissions</h2> <p>The Permission section allows you to configure access rights to the content type for specific groups and users.</p> <p><img src="/link/33cc114ee1b74ec68685d830f07e9111.aspx" width="1089" height="612" /></p> <h2>Settings</h2> <p>The Settings section allows you to configure basic content type properties. Some properties cannot be set when they were localized.</p> <p>In this section, Administrators can also reset the content type (for content types created from code) or Delete the content type (for content types creted from Admin mode).</p> <p><img src="/link/61f9f0cd41d34726a911341320b41075.aspx" width="1090" height="613" /></p> <h2>Additional functionality</h2> <p>As I mentioned at the beginning, no functionality was removed, but a few small features related to editing properties were added.</p> <h3>List properties</h3> <p>Since some time, creating list properties was available from code (you can read more about list properties <a href="/link/8ba16a78985e4446bf36669a38308eb4.aspx">here</a>). Now it's also available from Admin mode. To create a list property, an Administrator has to enable the "List" checkbox.</p> <p><img src="/link/f52bb8a83f6c45aba3e974564c915180.aspx" width="427" height="438" /></p> <h3>Reordering properties</h3> <p>In the previous version, reordering properties was done with the "Sort index" input field on property details form. Administrator can still use this functionality, but now properties can be reordered in easier way by using drag &amp; drop. Additionally, this functionality allows to change the group of the property.</p> <p><img src="/link/0e0d966e7b51422495e60d23bd1b686e.aspx" width="446" height="237" /></p> <h3>Type selection</h3> <p>Before, the property definition type selector was a long list of types. Now, in the current version, types are grouped with additional dropdown. For example for Text group we can select Long string, String or XHTML.</p> <p><img src="/link/17a39285bc1245b5b348ac62869d0176.aspx" width="491" height="372" /></p> <h3>Settings</h3> <p>On the properties edit form, we now allow to configure some of the custom property settings.</p> <h4>Allowed types</h4> <p>For property types related with ContentReference type, like ContentArea, Content Item etc., an administrator can configure allowed and restricted types.</p> <p><img src="/link/1b2853fcc70e4624a438c5ca43ead385.aspx" width="471" height="365" /></p> <h4>Dropdown lists</h4> <p>We changed the layout for dropdown lists to be more user friendly. There are no nested dialogs anymore and items can be configured directly from property edit form.</p> <p><img src="/link/1a82568cd4824fc8b3e48b1e94d414bd.aspx" width="473" height="309" /></p> <h4>Numbers</h4> <p>For number property types (Integer and Floats), an Administrator can configure value range by setting minimum and maximum values. Range can be also configured for date properties.</p> <p><img src="/link/86a52ed757eb4916955a931f03d784ed.aspx" width="477" height="291" /></p> <h4>String</h4> <p>For String property types, an Administrator can configure a maximum length as well as input regular expression validation rules.</p> <p><img src="/link/52a958903bf84b6dae91ea5bdc81200f.aspx" width="469" height="299" /></p>2023-10-08T06:43:21.0000000Z

Blog post

<p>In one of my previous articles I described new Color Picker widget. Today I&#8217;d like to show another simple property. I prepared extended version of the SelectOneAttribute. This extensions allows developers to configure SelectionFactory, that returns items with icons and CSS classess. This allows us to visually emphasize the importance of values in the list, [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/06/extended-selectionfactory/">Extended SelectionFactory</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-06-07T18:37:54.0000000Z

Blog post

<p>Bulk Edit is a plugin that allows to make changes to more than one Content at the same time. This can save time by simultaneously updating multiple properties that share the same information. This can be useful when a new property has been added to a ContentType and a default value needs to be assigned, [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/06/content-bulk-edit/">Content Bulk Edit</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-06-05T08:27:05.0000000Z

Blog post

<p>In one of my recent articles I described the Media Report admin mode plugin. Today I will also continue media topic, but this time I will focus on Edit Mode. Sometimes site contain a lot of similar iamges. When adding an image to an image property or the a Content Area it&#8217;s difficult to determinate [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/04/image-preview/">Image preview</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-04-30T20:57:03.0000000Z

Blog post

<p>Content Area property items allows to select Display Options. Display options let Editor specify how item should be renderred in the view mode. When adding content to a Content Area, we usually know which display option will be the best choice based on content type. For example our ButtonBlock will be best displayed as Narrow [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/04/content-area-default-display-options/">Content Area default display options</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-04-21T11:01:34.0000000Z

Blog post

<p>I recently prepared a plugin for Admin Mode that shows a list of all Content Media available on the system. The media report displays a list with useful statistics about the files and allows to sort and filter the results. In the list you can find the following information: Name and thumbnail &#8211; thumbnail with [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/04/media-report/">Media report</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-04-13T16:54:32.0000000Z

Blog post

<p>Over the years, several articles have been written about the ColorPicker property editor. I also decided to look into this topic. I wanted to create something modern, simple and configurable. That&#8217;s why I used a simple HTML input color wrapped in a dijit widget. Since there was very little code, I didn&#8217;t create a nuget [&#8230;]</p> <p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/03/another-take-on-colorpicker-property/">Another take on ColorPicker property</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p> 2023-03-03T09:46:48.0000000Z

Blog post

<p>I&rsquo;m happy to announce that, after a <a href="/link/b4a1b4e98369466b8888643d30820c6f.aspx">quite long time</a>, we finally upgraded the TinyMCE editor. The new <a href="https://nuget.optimizely.com/package/?id=EPiServer.CMS.TinyMce">EPiServer.CMS.TinyMce</a> package contains integration with latest version of the <a href="https://www.tiny.cloud/docs/tinymce/6/">TinyMCE 6 library</a>.</p> <p><img src="/link/72d73554232345b7a9af37804af0bb2a.aspx" width="632" alt="" height="604" /></p> <p>In this release we haven't added new functionalities, but have focused on the library migration.</p> <h2>Configuring editor</h2> <p>We have not changed the way TinyMCE is configured. We are still using <a href="https://docs.developers.optimizely.com/content-cloud/v12.0.0-content-cloud/docs/configuration-api">TinyMceConfiguration option</a>:</p> <pre class="language-csharp"><code>context.Services.Configure&lt;TinyMceConfiguration&gt;(config =&gt; { // Add content CSS to the default settings. config.Default() .ContentCss("/static/css/editor.css"); // Limit the block formats for the MainBody property of an ArticlePage. config.For&lt;ArticlePage&gt;(t =&gt; t.MainBody) .BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3"); }); </code></pre> <p>There are no new extension methods added for our integration, but there were significant breaking changes in the TinyMCE library. All custom plugins have to be updated. To do that you should follow the migration guide <a href="https://www.tiny.cloud/docs/migration-from-4x/">migration from 4x</a>, <a href="https://www.tiny.cloud/docs/tinymce/6/migration-from-5x">migration from 5x</a> and <a href="https://www.tiny.cloud/blog/how-to-migrate-from-tinymce-4-to-tinymce-5/">how to migrate from tinymce 4 to tinymce 5</a>. Please note that TinyMCE 5 and TinyMCE 6 API are very similar. Version 6 mainly removed obsolete methods.</p> <p>In the documentation above you can for example find that some plugins are not free anymore (<span><a href="https://www.tiny.cloud/docs/plugins/opensource/imagetools/">Image tools</a>, <a href="https://www.tiny.cloud/docs/plugins/opensource/spellchecker/">Spellchecker</a>, <a href="https://www.tiny.cloud/docs/tinymce/6/6.0-release-notes-core-changes/#removed-or-deprecated-plugins-table-of-contents">Table of Contents</a>) and some were move to the core package (print, paste, colorpicker, contextmenu, textcolor). Those plugins should be removed from TinyMCE configuration if they were used.</span></p> <p>All custom plugins code has to be revisited. There is not jQuery support anymore and there are API changes around registering button, icons, menus, etc. The latest documentation version about creating a custom plugin can be found <a href="https://www.tiny.cloud/docs/tinymce/6/creating-a-plugin/">here</a>.</p> <h2>Built-in TinyMCE spell checker</h2> <p>From EPiServer.CMS.TinyMce 4.0.0, the <a href="https://nuget.optimizely.com/package/?id=EPiServer.TinyMCESpellChecker">EPiServer.TinyMCESpellChecker</a> plugin will be included in core page. The EPiServer.TinyMCESpellChecker should be uninstalled since it won't be available as a separate package for EPiServer.CMS.TinyMce 4 and above.</p> <h2>Paste plugin</h2> <p>The standard paste plugin is now part of <a href="https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#plugins-paste">TinyMCE core package</a>. The paste functionality no longer supports pasting from Word. When pasting from Word, the <a href="https://www.tiny.cloud/docs/tinymce/6/introduction-to-powerpaste/">PowerPaste</a> premium plugin should be used.</p>2022-12-20T14:06:28.0000000Z

Blog post