Blog posts by Ben McKernan2019-11-07T10:44:00.0000000Zhttps://world.optimizely.com/blogs/Ben-McKernan/Optimizely WorldCreating a custom property editor using only react<p>I recently held a presentation at Ascend Stockholm 2019 about how you can create a custom property editor using only react. That is to say, you don't need to write any dojo code. I started by asking the room if they had ever created a custom property editor and about half the crowd raised their hands. So it seems to me that this is a relevant topic and I hope you find it interesting at the very least.</p>
<p>About a year ago I blogged about how you could use react in the edit UI (<a href="/link/7b7dbf615d3d4e28a4bf977aa4672670.aspx">https://world.episerver.com/blogs/ben-mckernan/dates/2018/11/a-react-gadget-in-episerver-cms-revisited</a>). However, the biggest problem with that post is that it still required you to bootstrap your react component by writing dojo code. Which means that in order to integrate well with the edit UI you would need to have a pretty good understanding of what our code is doing since there isn't a clear API to work with. So when asked to present something at Ascend, I decided that I wanted to find and present a solution to this and I figured that the best scenario would be one where you didn't need to write any dojo code. Which is why I created the react-to-dijit-adapter (<a href="https://www.npmjs.com/package/@episerver/react-to-dijit-adapter">https://www.npmjs.com/package/@episerver/react-to-dijit-adapter</a>).</p>
<h3>How it works</h3>
<p>The idea is pretty simple, the adapter will abstract away all the dojo parts. So you just create your editor as a react component and then in your entry point file, call the function provided in the node module, passing your component as an argument. You can then export the result of this function as the default export. Like this:</p>
<p><span style="color: #555555;"><strong>entry.js</strong></span></p>
<pre class="language-javascript"><code>import { asEditorWidget } from "@episerver/react-to-dijit-adapter";
import { MyComponent } from "./my-component";
export default asEditorWidget(MyComponent);</code></pre>
<p>The <code>asEditorWidget</code> function will take care of mounting and unmounting your component at the correct time, as well as propagating props to your component from the edit UI. What is also nice about these props is that they form a very clear API for your component to interact with. Notably, <code>value</code> which contains the current value and <code>onChange</code> which is a callback that should be called when the value changes in your component. For example, if I wanted to create the textarea with statistics editor (<a href="https://gregwiechec.com/2016/05/textarea-with-statistics">https://gregwiechec.com/2016/05/textarea-with-statistics</a>) that my colleague Grzegorz Wiecheć created a few years ago, it would look like this:</p>
<p><span style="color: #555555;"><strong>my-component.js</strong></span></p>
<pre class="language-javascript"><code>import React from "react";
const count = (value) => {
const original = typeof value === "string" ? value : "";
const trimmed = original.trim();
return {
paragraphs: trimmed ? (trimmed.match(/\n+/g) || []).length + 1 : 0,
words: trimmed ? (trimmed.replace(/['";:,.?¿\-!¡]+/g, "").match(/\S+/g) || []).length : 0,
characters: trimmed ? trimmed.replace(/\s/g, "").length : 0
};
};
export const MyComponent = ({ onChange, value }) => {
const result = count(value);
return (
<>
<textarea onChange={(e) => onChange(e.target.value)} value={value} style={{ width: "600px" }} />
<div>Characters: {result.characters}</div>
<div>Words: {result.words}</div>
<div>Paragraphs: {result.paragraphs}</div>
</>
);
};</code></pre>
<p>And here is what it looks like in the edit UI and you can use the react devtools as usual.</p>
<p><img src="/link/0b097e64267e4976896d054000d9cb72.aspx" /></p>
<h3>You need to bundle</h3>
<p>In its current form the code won't run in the UI since it has dependencies on node modules and it's using JSX, so there need to be a bundling step. This can be done with any of the popular bundling tools, webpack or rollup for example. There are two important settings that need to be configured in order for this to run in the UI:</p>
<ol>
<li>Format the bundle output as AMD</li>
<li>Configure <code>dojo/_base/declare</code> and <code>dijit/_WidgetBase</code> as externals</li>
</ol>
<p>The reasons for this are that the UI uses AMD for loading JavaScript modules and therefore also expects your module to be in this format. And because the react-to-dijit-adapter has dependencies on these dojo modules but they are something that will be available at runtime and shouldn't be pulled into your bundle. So a webpack configuration would look something like this:</p>
<p><span style="color: #555555;"><strong>webpack.config.js</strong></span></p>
<pre class="language-javascript"><code>const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "src/entry.js"),
output: {
filename: "TextAreaWithStatistics.js",
libraryTarget: "amd",
libraryExport: "default",
path: path.resolve(__dirname, "ClientResources/Scripts/Editors/")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/env",
"@babel/react"
]
}
}
}
]
},
externals: [
"dojo/_base/declare",
"dijit/_WidgetBase"
]
};</code></pre>
<p>The output path and filename are what you would use when configuring the <code>ClientEditingClass</code> for your property in either an <code>EditorDescriptor</code> or <code>ClientEditorAttribute</code>.</p>
<h3>Typescript</h3>
<p>The react-to-dijit-adapter package includes typings. This will make it easier to see which props are available to your component when using typescript.</p>
<h3>Contributing</h3>
<p>The code for this adapter is open-source and you can find it on GitHub (<a href="https://github.com/ben-mckernan/react-to-dijit-adapter">https://github.com/ben-mckernan/react-to-dijit-adapter</a>). Contributions are very welcome and if you have a scenario that doesn't work for you, please open an issue.</p>
<p>In terms of props that are passed to the react component, only the bare minimum are available currently. So if you have a use case where you need other props passed to your property editor, please open an issue describing your use case.</p>2019-11-07T10:44:00.0000000ZBlog postComments for content<p>In the next release of CMS UI (version 11.14.0), we will be releasing what I believe is a long awaited feature, comments for content. Up until now it has only been possible to comment on content in the project overview, which requires the content to be part of a project. With the new update, users will be able to comment on any content from edit mode so they can see the content at the same time as they are commenting.</p>
<h2>A quick overview</h2>
<p>There is a new button added to the menu in edit mode which allows users to toggle the comments pane.</p>
<p><img alt="toolbar.png" src="/link/84ba7c2b91fc45139ebba73d682f2a62.aspx" width="859" height="92" /></p>
<p>When toggled on, the comments pane will appear next to the content being edited and it will display all comments and activities for the current version of the content.</p>
<p><img alt="comment_on_review_request.png" src="/link/4e56eb2d95c24d6dba280570ea5639ce.aspx" width="1253" height="438" /></p>
<p>And as with comments in projects, it is possible to tag other users in the comment but using the <code>@username</code> syntax.</p>
<p><img alt="project_autotagging.png" src="/link/88d4f9a435be4ef59590bc8c529296d9.aspx" width="472" height="372" /></p>
<h2>Important note</h2>
<p>In this first version, the comments pane will only show activities and comment for the current version. This means that if a new draft is created, for example, then the comment associated with the published version will not be displayed. It is possible to see the draft for other version by using the version gadget.</p>
<p>This obviously has advantages and disadvantages depending on the workflow of the editor. We hope to iterate on this and in a future version add the possibility for users to filter comments for all versions or just the current version.</p>2019-01-04T14:50:12.0000000ZBlog postA react widget in Episerver CMS (Revisited)<p>Back in January 2017, Magnus Baneryd created a blog post about creating a gadget using react (<a href="/link/fbf389718c364a03878b378f130738bf.aspx">https://world.episerver.com/blogs/magnus-stalberg/Dates/2017/1/creating-a-react-widget-for-episerver-cms/</a>). Given this was nearly two years ago and the technology has changed a bit since then, I thought that I would revisit his idea.</p>
<p>I am going to assume that if this topic is interesting for you then you already have some knowledge about creating react applications and using different bundling tools. So I'm not going to explain what node modules you need need to install but rather just point out what might be different from a regular react application setup.</p>
<p><strong>Aside:</strong> I his blog, Magnus creates a custom gadget. I personally hate the gadgets in the left and right panes since they are so small and adding more than two basically makes them unusable. So for this demo I will use a custom edit view since it is easy to demo. However this same approach will still work for the custom gadget.</p>
<h2>Register the view server-side</h2>
<p>To create a new edit view for content data we need to register a <code>ViewConfiguration</code> class on the server side and point to the JavaScript file that should be loaded. In this case the file will be our bundled react view. The following code will do this:</p>
<pre class="language-csharp"><code>[ServiceConfiguration(typeof(ViewConfiguration))]
public class MyView : ViewConfiguration<IContentData>
{
public MyView()
{
Key = "my-view";
Name = "React View";
ControllerType = "alloy/components/ReactGadget";
IconClass = "epi-iconStar";
SortOrder = 100;
}
}</code></pre>
<p>Now when you look in edit mode you will have an extra view listed in the view switcher.</p>
<p><img src="/link/7f451cb27fb143bc893416a9625a1e1b.aspx" /></p>
<h2>Create the entry point</h2>
<p>If you have ever made a react application before you will be familiar with having an entry point called index.js that simply calls <code>ReactDOM.render</code> (<a href="https://reactjs.org/docs/react-dom.html#render">https://reactjs.org/docs/react-dom.html#render</a>). However in this case, since our view in running inside a dojo application, the entry point needs to pretend to be a widget and that widget will instead call <code>ReactDOM.render</code>. This can be done with code that is basically the same as what Magnus had written in his blog post:</p>
<p><strong>index.js</strong></p>
<pre class="language-javascript"><code>import React from "react";
import ReactDOM from "react-dom";
import declare from "dojo/_base/declare";
import WidgetBase from "dijit/_WidgetBase";
import MyComponent from "./MyComponent";
export default declare([WidgetBase], {
postCreate: function () {
ReactDOM.render(<MyComponent />, this.domNode);
},
destroy: function () {
ReactDOM.unmountComponentAtNode(this.domNode);
}
});</code></pre>
<p>This will create a widget which will then render the react component to it's DOM node. It will also unmount the component when the view is destroyed.</p>
<p>This code can be used as a boilerplate, just replace <code>MyComponent</code> with your react component.</p>
<h2>Building the bundle</h2>
<p>At this point let's assume you have your <code>MyComponent</code> implemented in react. In order to get it to appear in the UI it needs to be bundled into a single file (the one that our view configuration is pointing to). Nowadays the defacto bundler seems to be webpack (<a href="https://webpack.js.org/">https://webpack.js.org/</a>) but I would argue that rollup (<a href="https://rollupjs.org/">https://rollupjs.org/</a>) is better suited in this scenario. However I will give an example of both configurations since they are very similar.</p>
<p>The main point to note is that since the Episerver CMS uses AMD for its module loading, the bundle we produce also needs to be AMD formatted. Luckily the build tools will do this for you will a single line of configuration.</p>
<p>The second thing to note is that in the entry point code, in the previous example, there are imports for dojo and dijit. These however exist inside the Episerver CMS application and shouldn't be bundled, so they need to be marked as external. This is also done with a few lines of configuration.</p>
<p>The entry point for your bundle will be the index.js file from the previous example and the output file should what you configured in the view configuration. Change the paths in the examples below to suit your needs.</p>
<p><strong>webpack.config.js</strong></p>
<pre class="language-javascript"><code>const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "src/index.js"),
output: {
filename: "ReactGadget.js",
libraryTarget: "amd",
libraryExport: "default",
path: path.resolve(__dirname, "ClientResources/Scripts/components/")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
externals: [
"dojo/_base/declare",
"dijit/_WidgetBase"
]
};
</code></pre>
<p>The interesting parts of this configuration are the settings for <code>libraryTarget</code>, <code>libraryExport</code>, and <code>externals</code>.</p>
<p>For webpack it is important to set the <code>libraryExport</code> so that it returns the default export from the entry point rather than an object containing all the exports.</p>
<p><strong>rollup.config.js</strong></p>
<pre class="language-javascript"><code>import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";
import resolve from "rollup-plugin-node-resolve";
export default {
input: "src/index.js",
output: {
file: "ClientResources/Scripts/components/ReactGadget.js",
format: "amd"
},
plugins: [
babel({
exclude: "node_modules/**"
}),
commonjs(),
replace({ "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) }),
resolve()
],
external: [
"dojo/_base/declare",
"dijit/_WidgetBase"
]
};
</code></pre>
<p>The interesting parts of this configuration are the settings for <code>format</code>, and <code>external</code>.</p>
<h2>Accessing CMS features from the react component</h2>
<p>At this point you should have your react component loading in the UI. But as you develop your great new react view you may realise that it would be really nice to be able to use a component from the Episerver CMS. For example, you may want the user to be able to select a page using the content selector.</p>
<p>Well luckily I have created a react component that will do exactly this for you. The code for this component can be copied from this gist into your project (<a href="https://gist.github.com/ben-mckernan/b06137f4bc076f862b33d7dd0dbf9a88">https://gist.github.com/ben-mckernan/b06137f4bc076f862b33d7dd0dbf9a88</a>). It has a dependency on <span class="pl-s"><code>@episerver/amd-loader-proxy</code></span> so make sure you install this node module. I will note however that I have only done very limited testing on this component so there maybe some quirks.</p>
<p>Events will automatically be connected from the props to the widget based on the naming convention <code>onEventName</code><em>.</em> And settings for the widget will only be passed to the widget during construction. Changes to settings will not be propagated after mount, although it is probably not hard to implement.</p>
<p>Example usage could look like this:</p>
<pre class="language-javascript"><code>import React, { Component } from "react";
import DojoWidget from "./DojoWidget";
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
value: null
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(value) {
this.setState({ value });
}
render() {
const { value } = this.state;
const label = value ? <div>ContentLink: {value}</div> : null;
return (
<div>
<DojoWidget type="epi-cms/widget/ContentSelector" settings={{ repositoryKey: "pages" }} onChange={this.handleChange} />
{label}
</div>
);
}
}
export default MyComponent;</code></pre>
<p>Something else that maybe worth looking at is the <code>@episerver/amd-proxy-loader</code> I mentioned previously (<a href="https://www.npmjs.com/package/@episerver/amd-loader-proxy">https://www.npmjs.com/package/@episerver/amd-loader-proxy</a>). With this it is possible to dynamically require AMD modules from Episerver CMS from your JavaScript application. This is framework agnostic so it can be used with whichever JavaScript framework you prefer.</p>
<h2>Final words</h2>
<p>This is quite a rough example but I hope it inspires someone to make something much better.</p>2018-11-08T08:27:00.0000000ZBlog postThe new and improved TinyMCE editor<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>We have just release version 2.0.0 of the EPiServer.CMS.TinyMce package! This is a major version upgrade so you can expect breaking changes but you should be most excited about the improvements that have been made. I'm going to run through the main changes in this blog post.</p>
<p><strong>TL;DR</strong></p>
<p>The main points are, that we have upgraded to the latest version of TinyMCE (4.7.9 at the time of writing). We have removed the configuration from admin mode and instead the editor is only configurable via code. We have improved the drag and drop experience for pages, blocks and media when using Firefox or Chrome. IE and Edge still work as they have previously. There is currently no support for dynamic content.</p>
<h2>New version of TinyMCE</h2>
<p>The new editor is using the latest version of TinyMCE (4.7.9 at the time of writing). There have been some really great improvements done to the TinyMCE product and you can read more about them or try their demo editor at <a href="https://www.tinymce.com/">https://www.tinymce.com</a>. One point to note is that Episerver only bundles the standard plugins with the editor. So if you have a customer that wants to use a premium plugin they will need to license that from TinyMCE directly.</p>
<p>One of the most noticeable changes in the new version of TinyMCE is the modern theme. The toolbar and icons are much more user friendly and it is even possible to add a menu bar if needed. This is what the editor toolbar looks like in Episerver when using the default configuration:</p>
<p><img src="/link/f59760518fa8488295697c0298beb8b6.aspx" width="772" alt="Image TinyMCE_Editor.png" height="70" /></p>
<h2>Configuring the editor</h2>
<p>In this release we have completely rewritten the way the editor is configured. It is no longer possible to configure the editor in admin mode, instead all configuration is done via code. We have introduced a new TinyMceSettings class, which can be configured with any setting supported by TinyMCE, and also a TinyMceConfiguration class, which is responsible for mapping settings to properties on page types. Here is an example of how to extend the default settings and also how to configure custom settings for a particular property.</p>
<pre class="language-csharp"><code>context.Services.Configure<TinyMceConfiguration>(config =>
{
// 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<ArticlePage>(t => t.MainBody)
.BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3");
});</code></pre>
<p>You can see the example in its full form here: <a href="https://git.io/vxZWE">https://git.io/vxZWE</a></p>
<p>The TinyMceSettings class contains helper methods for configuring the most common settings. However it is possible to configure any setting supported by TinyMCE by using the AddSetting or RawSettings methods.</p>
<h3>Writing a custom plugin</h3>
<p>It is also possible to create your own plugins for the TinyMCE editor. See the TinyMCE documentation for how to write a plugin: <a href="https://www.tinymce.com/docs/advanced/creating-a-plugin">https://www.tinymce.com/docs/advanced/creating-a-plugin</a></p>
<p>Once you have created your plugin you can then configure the TinyMCE editor to load it by using the AddExternalPlugin method.</p>
<pre class="language-csharp"><code>context.Services.Configure<TinyMceConfiguration>(config =>
{
config.Default()
.AddExternalPlugin("my-plugin", "/path/to/my/plugin.js");
});</code></pre>
<h2>Better drag and drop support</h2>
<p>When dragging and dropping pages, blocks, or media in the previous version the TinyMCE editor, it was not possible to target the exact location to drop the content whilst dragging. The content would always be inserted at the place where the caret was last located. Unfortunately, in the new version, this is still the case for IE and Edge due to some browser quirks. However for Firefox and Chrome the experience is much better. The caret will follow the mouse whilst dragging so the user can see exactly where the content will be inserted.</p>
<p><img src="/link/c4a175386c3448349d7522f87be904ba.aspx" alt="" /><img src="/link/7ce73fe816e544579977d44e0a8c8449.aspx" alt="Image 5ab109bf495de964695126.gif" /></p>
<h2>No support for dynamic content</h2>
<p>At this point there is no NuGet package for dynamic content that is compatible with the new TinyMCE package. So at this point in time we do not support using dynamic content with the new TinyMCE editor.</p>
</body>
</html>2018-03-20T14:38:45.0000000ZBlog postIssue with modules not being found in CMS 11<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello everyone! I want to quickly address the issues around add-on modules not being found after upgrading to CMS 11 before misinformation starts to spread. Marija mentioned some of these issues in her previous blog post <a href="http://mariajemaria.net/upgraded-several-packages-episerver-11">http://mariajemaria.net/upgraded-several-packages-episerver-11</a> and there have been some questions on the forum.</p>
<p>The problem usually manifests itself as either an assembly not being found at runtime or a route not resolving correctly in the UI.</p>
<p>It is caused by the following, and I'm not sure if this is a breaking change but as far as I know it has not been documented (I will have the breaking changes document updated in any case). As part of the CMS 11 release the dependencies of the EPiServer.CMS nuget package were changed to no longer include EPiServer.Packaging.UI, you can compare the versions here:</p>
<p><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.CMS&packageVersion=11.1.0">http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.CMS&packageVersion=11.1.0</a></p>
<p><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.CMS&packageVersion=10.10.4">http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.CMS&packageVersion=10.10.4</a></p>
<p>For some reason, unknown to me, having EPiServer.Packaging installed changes the default behavior of the modules system to scan the protected modules folder and automatically load modules found there during startup. The default behavior without it installed is not to scan the protected modules folder. However this can be configured via the episerver.shell section of the web.config.</p>
<p>So there are a couple of easy options to fix this, either:</p>
<p>1. Add autoDiscovery="Modules" to the protectedModules element under episerver.shell in the web.config</p>
<pre class="language-xml"><code><protectedModules rootPath="~/EPiServer/" autoDiscovery="Modules /></code></pre>
<p>2. Or add each protected module that should be loaded as a child to the <span>protectedModules element (this is the default setup)</span></p>
<pre class="language-xml"><code><protectedModules rootPath="~/EPiServer/">
<add name="Shell" />
<add name="CMS" />
<add name="EPiServer.Cms.TinyMce" />
</protectedModules></code></pre>
<p>Also as a side note, I recommend against installing EPiServer.Packaging. The recommended way of installing add-ons is via nuget.</p>
</body>
</html>2018-01-08T14:00:05.0000000ZBlog postAlloy templates are now available on GitHub<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Along with the release of CMS 11 we have also made the Alloy templates available on GitHub. There are separate repositories for Web Forms and MVC, available here:</p>
<p><a href="https://github.com/episerver/alloy-webforms-template">https://github.com/episerver/alloy-webforms-template</a></p>
<p><a href="https://github.com/episerver/alloy-mvc-template">https://github.com/episerver/alloy-mvc-template</a></p>
<p>These templates are used to generate the sites that are used in Episerver's Visual Studio extension. So any improvements to these sites will eventually end up in the extension. We would really like to have more community input in these templates since you are the ones using them the most. However, with that said, <strong>we can not currently accept pull requests</strong> to the repositories from non-episerver employees due to legal reasons. But we are currently working on creating a CLA that will allow us to accept contributions. The idea being that contributors will be required to sign the CLA when creating a pull request.</p>
</body>
</html>2017-11-29T15:21:35.0000000ZBlog postPlanned Breaking Changes 2017 (CMS UI)<h2>Notable Changes</h2>
<h3>TinyMCE Package</h3>
<p>The TinyMCE editor and related plugin configuration features will be moved into a separate NuGet package as an add-on with its own versioning number and breaking changes. This is to allow us to have a release cycle for TinyMCE which is decoupled from the CMS UI release cycle.</p>
<p> </p>
<h3>ASP.NET Identity</h3>
<p>It was previously not possible to reset a user's password programmatically when using the ASP.NET Identity provider. Due to a bug, the method for resetting the password simply generated a reset token but never changed the password.</p>
<p><em>ApplicationUIUserManager<TUser>.ResetPassword(IUIUser user)</em> will now throw a not supported exception. This is because ASP.NET Identity does not support generating new passwords for security reasons, i.e. it is bad practice to send a new password to the user in plain text. The new method <em>ResetPassword(IUIUser user, string newPassword)</em> should be used instead.</p>
<p>Both methods will still work when using the API with older membership providers.</p>
<p> </p>
<h3>Dynamic Content and XForms Packages</h3>
<p><span>The legacy features Dynamic Content and XForms will be removed from the platform and moved into separate NuGet packages as add-ons </span><span>with their own versioning number and breaking changes. As the platform progresses, these features will become more limited over time. We recommend migrating to Forms or Blocks wherever possible.</span></p>
<p> </p>
<h3><span>Target .NET 4.6.1 Framework</span></h3>
<p><span>The CMS Core team is now targeting .NET 4.6.1 in order to be compliant with <span>NetStandard 2.0, and as such, all CMS UI projects will also target this framework.</span></span></p>
<p> </p>
<h2><span><span>Deprecations</span></span></h2>
<h3><span><span>jQuery</span></span></h3>
<p><span><span>The jQuery library that is bundled with the CMS UI is being deprecated and should no longer be used.</span></span></p>
<p> </p>
<h3><span><span>Gadget Framework</span></span></h3>
<p><span>As we have mentioned previously <a href="/link/a01ecec9d3e64f39a76b2aa768e0014d.aspx">here</a>, the gadget framework has been deprecated but will remain in the product for CMS 11. We recommend, however, that you begin to convert your gadgets to components now.</span></p>
<p> </p>
<h2>Other Changes</h2>
<ul>
<li><em>IContentChangeManager.Move(IContent source, IContent destination, bool createAsLocalAsset)</em> will now return the ContentReference of the moved content instead of void.</li>
<li>The key for content repository descriptors is no longer case sensitive.</li>
<li>DateTime properties on the visitor group criterion model will now be serialized to ISO 8601 when being sent to the client.</li>
<li>The <em>UIHint.BlockFolder</em> and <em>UIHint.MediaFolder</em> have been obsoleted and should be replaced with <em>UIHint.AssetsFolder</em>.</li>
<li>The <em>UIHint.LongString</em> has been obsoleted and should be replaced with <em>UIHint.Textarea</em>.</li>
<li>Removed many previously obsoleted constructors from classes where another a public constructor is available for use instead.</li>
</ul>
<p>And of course, included with all this are a lot of bug fixes :)</p>2017-09-18T12:27:10.0000000ZBlog postThe dot notation breaking change<p>In Magnus's blog post (<a href="/link/4b536a6f4e1a4376a856ea949dcfca7e.aspx">http://world.episerver.com/blogs/magnus-stalberg/Dates/2016/9/planned-breaking-changes-in-cms-ui-2016/</a>) on the upcoming breaking changes in the CMS UI, there were a lot of questions and a little confusion about the removal of dot notation support. I am hoping that with this blog post I can shed some light on the matter and make things a little easier to understand.</p>
<h2>The history</h2>
<p>When we first released the updated UI back in CMS 7, we were using a version of dojo that had its own synchronous loader which used dot notation, the syntax looked something like this:</p>
<pre class="language-html"><code><script type="text/javascript">
dojo.require("dijit.Dialog");
var dialog = new dijit.Dialog();
</script></code></pre>
<p>When we updated to CMS 7.1 we also upgraded our dojo dependency. However dojo had changed its loader to be asynchronous and use the AMD format. This format uses slash notation since each dependency is a path to a JavaScript file. It looks something like this:</p>
<pre class="language-html"><code><script type="text/javascript">
require(["dijit/Dialog"], function (Dialog) {
var dialog = new Dialog();
});
</script>
</code></pre>
<p>To ensure the change wouldn't be too breaking we added code to maintain support for the dot notation.</p>
<h2>The breaking change</h2>
<p>In the coming CMS 10 release we have removed the support for the dot notation in the JavaScript loader. So this means that anywhere were a JavaScript file is referenced in the code it should now use slash notation (that is forward slashes).</p>
<p>It is also important to note that we have been using the slash notation since CMS 7.1 so you don't need to wait for the CMS 10 release to change your code. You can change it now!</p>
<p>The effects of this should be very limited since there are not many areas where the dot notation could have been used. Here are the places that you should check in your code:</p>
<p><strong>PropertyFor: </strong>It is possible to pass an additionalViewData argument to the PropertyFor method.</p>
<p><strong>data-epi-* attributes: </strong>Any epi attributes that you manually render in your views.</p>
<p><strong>Widget templates</strong>: The data-dojo-type attribute in widget templates.</p>
<p><strong>Initializer class in module.config: </strong>It is possible to pass an initializer JavaScript file to the clientModule element in the module.config, for example:</p>
<pre class="language-xml"><code><clientModule initializer="addon/Initializer">
</clientModule></code></pre>
<p><strong>ComponentBase:</strong> Any class inheriting from ComponentBase that sends a widget type to the constructor.</p>
<p><strong>ComponentDefinitionBase: </strong>Any class inheriting from ComponentDefinitionBase that sends a widget type to the constructor.</p>
<p><strong>EditorDescriptor: </strong>There are several properties on the EditorDescriptor that could be affect but the most likely is ClientEditingClass.</p>
<p><strong>ViewConfiguration: </strong>The properties ViewType and ControllerType.</p>2016-09-16T13:23:17.9270000ZBlog postContent reference list with page preview<p>I'm sure everyone has read <a href="https://gregwiechec.com/">Grzegorz Wiecheć</a> awesome blog, and if you haven't then you should. I while back he blogged about adding previews to the content reference list (<a href="https://gregwiechec.com/2015/09/content-references-list-with-preview/">https://gregwiechec.com/2015/09/content-references-list-with-preview/</a>) and the content area (<a href="https://gregwiechec.com/2016/03/updated-contentarea-with-images/">https://gregwiechec.com/2016/03/updated-contentarea-with-images/</a>). However it only supported previewing images, which I thought was under-selling the concept. So I'm going to one up him and add page and block preview support.</p>
<p><img src="/link/8f7f198a1b264fb4b8e3de4d8d789304.aspx" alt="Image j2cWQXiw4B.gif" /></p>
<p>There is a library called rasterizeHTML.js (<a href="https://github.com/cburgmer/rasterizeHTML.js">https://github.com/cburgmer/rasterizeHTML.js</a>) which provides some nice methods for rendering an HTML document to a canvas element. My custom editor will use this to load the preview URL of a page or a block and render it to a canvas which is then displayed as a preview tooltip.</p>
<pre class="language-csharp"><code>define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/on",
"dojo/dom",
"dojo/aspect",
"dijit/popup",
"dijit/TooltipDialog",
"alloy/rasterize-html",
"epi-cms/contentediting/editors/ContentReferenceListEditor"
], function (
declare,
lang,
on,
dom,
aspect,
popup,
TooltipDialog,
rasterizeHtml,
ContentReferenceListEditor
) {
return declare([ContentReferenceListEditor], {
buildRendering: function () {
this.inherited(arguments);
var _this = this;
aspect.around(this.list._list, "insertRow", function (originalInsertRow) {
return function (object, parent, beforeNode, i, option) {
var row = originalInsertRow.apply(this, arguments);
if (object.hasTemplate) {
lang.hitch(_this, _this._createTooltip(row, object.previewUrl, !!object.downloadUrl));
}
return row;
};
});
},
_createTooltip: function (node, previewUrl, isImage) {
var content;
if (isImage) {
content = document.createElement("img");
content.src = previewUrl;
content.setAttribute("style", "max-width: 500px;");
} else {
content = document.createElement("canvas");
content.height = 600;
content.width = 750;
var context = content.getContext("2d");
context.scale(0.75, 0.75);
rasterizeHtml.drawURL(previewUrl, content, { height: 800, width: 1000 });
}
this.own(node.tooltip = new TooltipDialog({
connectId: [node.id],
content: content
}));
on(node, "mouseleave", function () {
popup.close(node.tooltip);
});
on(node, "click", function () {
popup.open({
popup: node.tooltip,
around: dom.byId(node.id),
orient: ["after-centered"]
});
});
}
});
});
</code></pre>
<p>This approach does not support CORS so the pages and blocks being rendered have to be from the same origin as the page running the script. Browser support is limited to Firefox, Chrome, Safari, and Edge.</p>
<p>The server side code to make your properties use this editor can be found on Grzegorz's blog post (<a href="https://gregwiechec.com/2015/09/content-references-list-with-preview/">https://gregwiechec.com/2015/09/content-references-list-with-preview/</a>).</p>2016-06-02T16:41:56.6500000ZBlog postSupporting SVG images<p>Scalable Vector Graphics (SVG) is a very handy image format when working with icons or logos that need to be used in different sizes. Adding support for SVG image files in EPiServer is very easy to do.</p>
<p>Adding a vector image content type is done in the same way as adding an image content type. The main difference is obviously the filename extensions that are associated with the content type, in this case we associate only .svg with the content type. For example:</p>
<pre class="language-csharp"><code>[ContentType(GUID = "F522B459-EB27-462C-B216-989FC7FF9448")]
[MediaDescriptor(ExtensionString = "svg")]
public class VectorImageFile : ImageData
{
/// <summary>
/// Gets the generated thumbnail for this media.
/// </summary>
public override Blob Thumbnail
{
get { return BinaryData; }
}
}</code></pre>
<p>In the example above we also override the thumbnail property to return the binary data of the image itself. The reason for this is that the built-in thumbnail generator can not parse SVG file types in order to generate a thumbnail. However this is not a problem since generating a thumbnail for a vector based image is unnecessary since it can, by its very nature, be displayed at any size.</p>
<p>The vector image should work seamlessly with other images types since all modern browsers support rendering SVG as well as having img tags whose source is an SVG file. This means that you will be able to drag and drop SVG images to a TinyMCE editor and resize them there or select them via the image content picker.</p>
<p>The only quirk is that the "Open in Image Editor" menu option will be available. When trying to open an SVG image, the editor will show an alert stating that the current file type is not supported.</p>2015-07-02T15:09:34.6130000ZBlog postModifying the default view components<p>I have recently received a lot of questions via support and on the forums about how to change the components that are available by default in the CMS view, e.g. removing the media component. Most people believe that this is not something we support, which is not strange considering the lack of documentation about it. <a href="/link/c7ca6f89979248dfb810e53141d75c08.aspx">Linus Ekström</a> blogged about this over two years ago now, you can see that <a href="/link/96aa7f0a6d0546c2b793e194907804d7.aspx">here</a>, so I think it is time for a little reminder about how it is done. <strong>Note:</strong> the following only works for views that have not been modified by the user, e.g. the user has not added any components to their view.</p>
<h2>Via Configuration</h2>
<p>The simplest way to add or remove components is via configuration in the web.config. The problem is knowing what a component is called and the area path where it is plugged into in order to make this configuration work. This is most likely the reason for people not knowing that this was possible. The following code will remove the media component from the right panel:</p>
<pre class="language-xml"><code><episerver.shell>
<viewManager>
<views>
<add name="/episerver/cms/home">
<settings>
<add name="RemoveMediaComponent"
transformationType="Remove"
definitionName="EPiServer.Cms.Shell.UI.Components.MediaComponent"
plugInArea="/episerver/cms/assets/defaultgroup" />
</settings>
</add>
</views>
</viewManager>
</episerver.shell></code></pre>
<p>As you can see there are a lot of magic strings here. A lot of this information would probably need to be reflected out of the assembly unfortunately. The same code with the transformationType set to Add would add the component to the given plug-in area. Plug-in areas are available as constant strings on the PlugInArea class if you want to add a component somewhere.</p>
<h2>Via Code</h2>
<p>There is also a way to transform the view via code although I am not sure it is any easier. Basically you can implement a IViewTransformer class and mark it with the ViewTransformerAttribute. This will then run when the view is being loaded so you can add or remove any components then via code.</p>2015-06-12T18:17:28.2930000ZBlog postThe new and improved allowed types<p style="margin-bottom: 0px;"><strong>TL;DR</strong><br />The latest pre-release version of the EPiServer.CMS.UI package contains the new and improved allowed types attribute. If you are feeling adventurous then upgrade and try it out. The improvements are:</p>
<ul style="margin-bottom: 16px; margin-top: 8px;">
<li>Clicking the "create a new block" link of a content area will now filter the block types that appear based on allowed types.</li>
<li>It is now possible to restrict a subset of the allowed types.</li>
<li>Interface types are now supported.</li>
<li>UI descriptors are now automatically generated for content types classes and their base classes.</li>
<li>Validation occurs for allowed types in the content area.</li>
</ul>
<h2>AllowedTypesAttribute</h2>
<p>Most of you have probably read previous blog posts from myself and others on the allowed types attribute and its usages and its limitations. For those who don't know what it is, it is an attribute that can be applied to properties on your content type model in order to control what content types that property can accept. For example, only allowing images on a gallery property. The code looks like this:</p>
<pre class="language-csharp"><code>[AllowedTypes(new []{ typeof(ImageData) })]
public virtual ContentArea Gallery { get; set; }</code></pre>
<p>In the next major version of EPiServer <em>(EPiServer.CMS.UI 8.0.0)</em> we have made a lot of improvements to the allowed types in order to support requested features and fix problems in the current version. The next version is currently available in the nuget feed as a pre-release package if you are interested to give it a test run.</p>
<h3>Creating Content from the Content Area</h3>
<p>The biggest problem with the current implementation of the allowed types, and also the most up-voted bug on EPiServer World (<a href="/link/092227481eb64ae9b78ebd86e7e2d37a.aspx">110190</a>), is the fact that allowed types doesn't filter the list of content types when creating a block from a content area; it only affected drag and drop. This has now been fixed meaning that it is no longer possible to add disallowed types to the content area either via drag and drop or the create link.</p>
<h3>Validation of Allowed Types</h3>
<p>The content area has also been modified in the core so that, when saving or publishing, it validates whether it contains any types that are not allowed. This ensures that changes to a content area via code also follow the allowed types restrictions.</p>
<h3>Restricted Types</h3>
<p>An additional feature we have added to the allowed types attribute is the ability to specify a subset of types that should not be allowed. For example, it is quite common to have a content area which should accept all blocks except for blocks which don't fit; i.e. the jumbotron block in the alloy templates is too big to be rendered in the sidebar. The restricted types are passed through as the second constructor argument on the allowed types attribute. The code looks like this:</p>
<pre class="language-csharp"><code>[AllowedTypes(new[] { typeof(BlockData) }, new[] { typeof(JumbotronBlock) })]
public virtual ContentArea RelatedContentArea { get; set; }</code></pre>
<h3>Automatic Generation of UI Descriptors</h3>
<p>Currently the system automatically creates UI descriptors for all the registered content types. This means that you can specify a particular content type as an allowed or restricted type without the need to create the UI descriptor yourself. However this was not the case for base classes and thus you needed to create a UI descriptor for any base classes you wanted to specify in the allowed types. In the next version we have refactored the automatic generation so that base classes are also generated, meaning that you can specify any class type without needing to create a UI descriptor yourself.</p>
<p>If you have a type that you want to create a UI descriptor for in order to, for example, have a custom icon. Then you can still create the UI descriptor and it will take precedence over the automatically generated one.</p>
<h3>Interface Support</h3>
<p>We have also made changes to support UI descriptors for interfaces, meaning that it is possible to specify an interface type as the allowed type. For example, if you had an interface for blocks that should appear in the sidebar then the code would look like this:</p>
<pre class="language-csharp"><code>[AllowedTypes(new[] { typeof(ISidebarBlock) })]
public virtual ContentArea RelatedContentArea { get; set; }</code></pre>
<p>However, unlike the content type classes and their base classes, UI descriptors are not automatically generated. So in order for the above to work you will need to create a UI descriptor. </p>2015-02-04T09:00:00.0000000ZBlog postUsing custom CSS in edit mode<p><strong>TL;DR</strong><br /> You can dynamically load your custom CSS for your components in edit mode via the <span style="font-family: monospace;">xstyle/css</span> plugin. Simply require the plugin with the relative path to your stylesheet as a parameter, e.g. <span style="font-family: monospace;">xstyle/css!./path/to/stylesheet.css</span></p>
<h2>Dynamically Loading CSS</h2>
<p>When you develop a custom component for the edit interface in EPiServer it is often the case that you need to have custom CSS to make it look great. In large JavaScript applications, like the edit interface in EPiServer 7.5, it can be beneficial to dynamically load resources such as CSS. The less you need to load at startup the better the startup performance will be, obviously. As you all should know, EPiServer uses an AMD loader to load JavaScript. One of the great things about AMD is that it gives us the ability to load JavaScript dynamically. So when you use the edit interface, things like editors or different views aren't loaded until they are actually needed.</p>
<p>The next great thing about AMD is that it has a concept of plugins. A plugin is a JavaScript module within AMD which loads another file and returns that to the loader instead of itself. For example both <span style="font-family: monospace;">dojo/text</span> and <span style="font-family: monospace;">epi/i18n</span> are examples of plugins that return file text (good for loading templates) and EPiServer localizations respectively.</p>
<p>We also have the <span style="font-family: monospace;">xstyle/css</span> plugin whose sole purpose is to load CSS files.</p>
<div>
<pre class="language-csharp"><code>define([
'dojo/_base/declare',
'xstyle/css!./path/to/stylesheet.css' // PRO-TIP: Place this last since it doesn't return anything.
], function(declare) {
return declare([], {
// ...
});
});
</code></pre>
</div>
<p>In the above example you can see that we are requiring the plugin and passing through the relative path to the stylesheet as a parameter. The exclamation mark indicates that the module should be loaded as a plugin and then AMD takes care of passing through the remaining string as a parameter to the plugin. The plugin will then parse this string and add a link node, with the path as its href attribute, to the head element of the page causing the referenced CSS file to be loaded into the page.</p>2014-12-12T09:48:01.0000000ZBlog postHow to debug Episerver UI code<p><strong>TL;DR</strong><br />To run your site with uncompressed JavaScript in edit mode add <span style="font-family: monospace;"><clientResources debug="true" /></span> to your web.config inside the <span style="font-family: monospace;">episerver.framework</span> element.</p>
<p> </p>
<h2>JavaScript Debug Files Explained</h2>
<p>A while back I posted a blog about using <a href="/link/379470be10da41ac8956b9e69cd5e16c.aspx">uncompressed JavaScript files for debugging EPiServer 7</a>. I thought it would be worth highlighting how you can use uncompressed JavaScript in EPiServer 7.6 and onwards and how it works with the new continuous release cycle. I am happy to say it is even easier than before!</p>
<p>As of EPiServer 7.6 the CMS UI has been released via NuGet packages. These packages contain all the JavaScript files required to run the UI compressed into a zip file. The system then reads the contents of the zip file at run time. The great thing about this approach is that at initialization, if the client resources debug flag is set to true, the system will first look for a debug version of the JavaScript zip file and load that instead if it exists.</p>
<p>In order to have the system use the debug files you need to enable debug mode for client resources. You can do this simply by adding the <span><clientResources debug="true" /></span> element to your web.config inside the <span>episerver.framework</span> element. You can then toggle the debug files on and off by changing the value of the debug attribute from true to false.</p>
<h3><span>EPiServer.CMS.UI.Sources (advanced topic)</span></h3>
<p>This nuget package contains all original UI source files together with uncompressed dojo & dijit.</p>
<p>That source package is built as part of every release so it ties quite simply into the continuous release cycle. You can install it the same way you would any other NuGet package from <a href="http://nuget.episerver.com/">nuget.episerver.com</a>.</p>
<p><code>Install-Package EPiServer.CMS.UI.Sources</code></p>
<p>In case you ever need to manipulate sources files and then create a customized dojo build you can use that package. It comes together with all dojo build tools.</p>
<p>Please note that in order to debug the EPiServer edit mode you don't need that package. The config change described above is sufficient.</p>2014-08-15T13:34:23.0000000ZBlog postRestricting the allowed types in a content area<p>A feature that was sorely missed in EPiServer 7 was the ability to restrict the type of content that could be dragged and dropped into a content area. Well, you will all be glad to know that in EPiServer 7.5 the content area has received a lot of loving and it is now possible to restrict the content types that can be dragged and dropped into it.</p>
<p>Something else that is also worth mentioning is the fact that media is also <span style="font-family: monospace;">IContent</span> now. So you can say goodbye to those silly ImageBlock and VideoBlock implementations that I know you all have, because this change means that it is possible to drag and drop image or video content directly into the content area.</p>
<p>These two changes open up a world of use cases for the content area. For example, image galleries or image carousels where the user can simply drag an image into the content area and it is added to the gallery or carousel. Another use case might be that you want to restrict which blocks can be added to a content area in the sidebar or footer or on the home page.</p>
<h2>The Code</h2>
<p>The edit interface is built up based on metadata for each property. This metadata includes the editor widget to use and also any default configuration that the widget should be initialized with. This metadata can be customized via an editor descriptor.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 500px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">[EditorDescriptorRegistration(TargetType = <span style="color: #0000ff;">typeof</span>(ContentArea), UIHint = <span style="color: #006080;">"Gallery"</span>)]</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> ImageGalleryEditorDescriptor : EditorDescriptor</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">{</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">public</span> ImageGalleryEditorDescriptor()</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Setup the types that are allowed to be dragged and dropped into the content</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// area; in this case only images are allowed to be added.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> AllowedTypes = <span style="color: #0000ff;">new</span> Type[] { <span style="color: #0000ff;">typeof</span>(IContentImage) };</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Unfortunetly the ContentAreaEditorDescriptor is located in the CMS module</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// and thus can not be inherited from; these settings are copied from that</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// descriptor. These settings determine which editor and overlay should be</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// used by this property in edit mode.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> ClientEditingClass = <span style="color: #006080;">"epi-cms.contentediting.editors.ContentAreaEditor"</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> OverlayConfiguration.Add(<span style="color: #006080;">"customType"</span>, <span style="color: #006080;">"epi-cms.widget.overlay.ContentArea"</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">}</pre>
<!--CRLF--></div>
</div>
<p>Here you can see that we've set allowed types to only include <span style="font-family: monospace;">IContentImage</span> types. So any class extending this interface can be added to the content area. This allowed types property automatically populates the relevant overlay and editor widget metadata, so that drag and drop will be restricted to images in both on-page and all properties editing modes.</p>
<p>The other two properties indicate which editor widget should be used and that a custom overlay should also be used. Unfortunately these need to be specified as we can't extend the <span style="font-family: monospace;">ContentAreaEditorDescriptor</span> and inherited them. This is a problem we are aware of and in the process of solving.</p>
<p>With that added to the project it is now just a matter of telling the relevant properties to use this editor descriptor rather than the default one. This is done via the UIHint that we added in the editor descriptor registration attribute. The attribute indicates that content area properties with a UIHint of Gallery should use this editor descriptor. So it is just a matter of adding a UIHint to the relevant properties.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">[UIHint(<span style="color: #006080;">"Gallery"</span>)]</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">virtual</span> ContentArea Gallery { get; set; }</pre>
<!--CRLF--></div>
</div>
<h2>Caveats</h2>
<p>The main thing to note is this only affects drag and drop in edit mode. So it is still possible to add other types of content via code.</p>
<p>The only other caveat that I've seen so far is that the editor and overlay for the content area both have some inbuilt help text that contains an action link for shortcutting to the block creation process. This process if followed through automatically adds the new block to the content area. Currently there is no way to configure this text not to display. It should be a fairly simple fix and there is a feature request for it so hopefully that should come soon.</p>2013-12-03T13:19:00.0000000ZBlog postAdding extra information to the property overlay<p>Sometimes it can be quite hard for editors to know which property they should edit or even which property they are currently editing. Especially when they’ve just created a page and are presented with a column of empty blue squares that represent editable properties. For example:</p>
<p><img src="/link/5ea9ae66d543425bb6475f190a1ea2f9.png" alt="" /></p>
<p>The question of whether it’s possible to modify the overlays to display extra information has come up several times and I have given a few quick answers on the forums. But I figured a blog post might be more appreciated.</p>
<h2>Display Name</h2>
<p>The display name for each property is surprisingly already added to the DOM for all properties except content areas. Unfortunately due to some late design decisions it was hidden so that it wouldn't cause any visual problems. Such as hiding important information on the underlying website. This means that it is actually really simple to get the names of properties to be displayed, for example, on hover of an overlay. It's just a matter of loading some styles in edit mode:</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 400px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #008000;">/* Display the information node when hovering the overlay. */</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #cc6633;">.Sleek</span> <span style="color: #cc6633;">.epi-overlay-item</span><span style="color: #cc6633;">.dijitHover</span> <span style="color: #cc6633;">.epi-overlay-item-info</span> {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">color</span>: <span style="color: #006080;">#333;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">background-color</span>: <span style="color: #006080;">#B4C600;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">border</span>: <span style="color: #006080;">3px solid #B4C600;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">border-radius</span>: <span style="color: #006080;">2px 2px 0 0;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">display</span>: <span style="color: #006080;">block;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">font-size</span>: <span style="color: #006080;">1.2em;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">top</span>: <span style="color: #006080;">-30px;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">right</span>: <span style="color: #006080;">-3px;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">}</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #008000;">/* Hide the information node when editing. */</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #cc6633;">.Sleek</span> <span style="color: #cc6633;">.epi-overlay-item</span><span style="color: #cc6633;">.dijitFocused</span> <span style="color: #cc6633;">.epi-overlay-item-info</span> {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">display</span>: <span style="color: #006080;">none;</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">}</pre>
<!--CRLF--></div>
</div>
<p>The first selector here says that we want to show the display name when a user hovers the overlay. The main part of this is the display tag which actually makes the display name appear. The others are there to make it look good. I would suggest tweaking these based on how you want it to appear.</p>
<p>The second selector is to make the display name disappear when the user is editing. So in this case when the overlay has focus. This is important for properties that are edited inline, since the display name could distract or potentially hide important information, but you can decide if it is necessary.</p>
<p>Thus we end up with the following:</p>
<p><img src="/link/04d29c09b7a64db3abd4e6af73f0cd96.png" alt="" /></p>
<h2>Loading Custom CSS in Edit Mode</h2>
<p>In order to load this custom CSS file in edit mode you need to add a module.config to your solution with the following:</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 400px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"><?</span><span style="color: #800000;">xml</span> <span style="color: #ff0000;">version</span><span style="color: #0000ff;">="1.0"</span> <span style="color: #ff0000;">encoding</span><span style="color: #0000ff;">="utf-8"</span>?<span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">module</span><span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">clientResources</span><span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">add</span> <span style="color: #ff0000;">name</span><span style="color: #0000ff;">="epi-cms.widgets.base"</span> <span style="color: #ff0000;">path</span><span style="color: #0000ff;">="path-to-stylesheet.css"</span> <span style="color: #ff0000;">resourceType</span><span style="color: #0000ff;">="Style"</span> <span style="color: #0000ff;">/></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">clientResources</span><span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #0000ff;"></</span><span style="color: #800000;">module</span><span style="color: #0000ff;">></span></pre>
<!--CRLF--></div>
</div>2013-09-05T16:47:53.0000000ZBlog postChanges to the module.config for EPiServer 7.1<p>I’ve seen on the forum that there have been several people having issues running their custom dojo code after the EPiServer 7.1 update. So I thought I’d mention these issues, their cause and the solution.</p>
<h2>Required Resources Key Changed for CMS</h2>
<p>So I’ve demonstrated in previous blog posts that it’s possible to initialize a module without having a component. This was done by using a little trick to add an initializer script to the required resources for CMS by adding the following to your module.config file.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">clientResources</span><span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">add</span> <span style="color: #ff0000;">name</span><span style="color: #0000ff;">="epi.cms.widgets.base"</span> <span style="color: #ff0000;">path</span><span style="color: #0000ff;">="initialize.js"</span> <span style="color: #ff0000;">resourceType</span><span style="color: #0000ff;">="Script"</span> <span style="color: #0000ff;">/></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"></</span><span style="color: #800000;">clientResources</span><span style="color: #0000ff;">></span></pre>
<!--CRLF--></div>
</div>
<p>With the upgrade to dojo 1.8.3 we changed the dojo package name for CMS to be epi-cms. This is due to the fact that dojo has made changes in their loader which means that dot or slash separated package names are no longer supported. To be consistent with our naming we also changed the key for required resources. So the following are now the required resource keys:</p>
<p>EPiServer 7: <span style="font-family: monospace;">epi.cms.widgets.base</span></p>
<p>EPiServer 7.1: <span style="font-family: monospace;">epi-cms.widgets.base</span></p>
<h2>JavaScript Package Naming</h2>
<p>As mentioned previously dojo have changed their loader to be fully AMD compliant and as such dot or slash separated names are no longer supported. For example the following is no longer supported:</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">dojoModules</span><span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">add</span> <span style="color: #ff0000;">name</span><span style="color: #0000ff;">="my.addon"</span> <span style="color: #ff0000;">path</span><span style="color: #0000ff;">="scripts/addon"</span> <span style="color: #0000ff;">/></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"></</span><span style="color: #800000;">dojoModules</span><span style="color: #0000ff;">></span></pre>
<!--CRLF--></div>
</div>
<p>My suggestion if you are in this situation is to change the delimiter from dot or slash to be a dash instead. Meaning that in the above example the package name would instead be <span style="font-family: monospace;">my-addon.</span></p>
<p>Hopefully this helps anybody who runs into similar issues!</p>2013-04-18T10:50:15.0000000ZBlog postUncompressed JavaScript files for debugging EPiServer 7<p><strong>Update:</strong> <a href="/link/ae233441257c43f899c457011f466fdd.aspx">Click here for a guide on how to use uncompressed JavaScript files in EPiServer 7.6+</a></p>
<p>I’m not sure how many people are aware of the fact that there is actually a package containing the uncompressed versions of all the JavaScript files used in the new EPiServer 7 user interface available to be downloaded and used for debugging purposes.</p>
<p>In any case, we’ve just updated the download package to contain the RTM version of the files (since for the last few weeks it has been a CTP version). The download page can be found here:</p>
<p><a href="http://world.episerver.com/Download/Items/EPiServer-CMS/EPiServer-7---CMS/EPiServer-CMS-Debugging-of-Client-Side-Files/">http://world.episerver.com/Download/Items/EPiServer-CMS/EPiServer-7---CMS/EPiServer-CMS-Debugging-of-Client-Side-Files/</a></p>
<h2>Installation Instructions</h2>
<p>The package is a zip file which can be extracted directly into the root VPP folder for the site you wish to debug. All the files contained within the package have their filename suffixed with <strong>.uncompressed.js</strong>, meaning that they will not override the current compressed files. This allows you, as a developer, to switch between compressed and uncompressed files very simply.</p>
<h2>Running with the Uncompressed Files</h2>
<p>To tell the system to use the uncompressed files, simply add the following to the EPiServerFramework.config file underneath the episerver.framework element:</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">clientResources</span> <span style="color: #ff0000;">debug</span><span style="color: #0000ff;">="true"</span> <span style="color: #0000ff;">/></span></pre>
<!--CRLF--></div>
</div>
<p>Happy coding!</p>2012-12-11T15:23:27.0000000ZBlog postTaking control of the EPiServer 7 user interface<p>The design of the user interface in EPiServer 7 has been primarily targeted toward editors and publishes. Meaning that a lot of the more advanced functionality has been hidden from the main view. Dynamic Properties is one of these pieces of functionality that has been hidden.</p>
<p>From my time working with previous versions of EPiServer at a partner company, I know that dynamic properties can be used quite often. So to make your lives as developers or system admins easier I’ve created a nice little plugin that will add a button to the main toolbar in edit mode. The button will display the dynamic properties edit view in the main content area of edit mode when clicked. The nice thing about this scenario is that it lets me demonstrate a couple of ways that you too can customize edit mode!</p>
<h2>The Command</h2>
<p>In EPiServer 7 we use a command pattern to back the visual elements in the user interface. This allows us to separate the functional concerns of a command from the visual representation. Here is the code for the edit dynamic properties command:</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">define([</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// General application modules</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #006080;">'dojo/_base/declare'</span>, <span style="color: #006080;">'dojo/_base/lang'</span>, <span style="color: #006080;">'dojo/topic'</span>, <span style="color: #006080;">'epi/cms/contentediting/ContentActionSupport'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Parent classes</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #006080;">'epi/shell/command/_Command'</span>, <span style="color: #006080;">'epi/cms/_ContentContextMixin'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Resources</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #006080;">'epi/i18n!epi/nls/addon.dynamicproperties'</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">], <span style="color: #0000ff;">function</span>(declare, lang, topic, ContentActionSupport, _Command, _ContentContextMixin, resources) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// module:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// addon/command/EditDynamicProperties</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Displays the edit dynamic properties view in the main edit area when executed. Also listens</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// for context changes in order to update whether it can execute.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> declare([_Command, _ContentContextMixin], {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// label: [public] String</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// The action text of the command to be used in visual elements.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> label: resources.label,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// tooltip: [public] String</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// The description text of the command to be used in visual elements.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> tooltip: resources.tooltip,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// iconClass: [public] String</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// The icon class of the command to be used in visual elements.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> iconClass: <span style="color: #006080;">'dijitNoIcon'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> contentContextChanged: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Set the command's model to the new current content.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.getCurrentContent().then(lang.hitch(<span style="color: #0000ff;">this</span>, <span style="color: #006080;">'set'</span>, <span style="color: #006080;">'model'</span>));</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> _execute: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Publishes a change view topic to switch to the dynamic properties view for the current model.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> topic.publish(<span style="color: #006080;">'/epi/shell/action/changeview'</span>, <span style="color: #006080;">'addon/view/DynamicProperties'</span>, <span style="color: #0000ff;">null</span>, <span style="color: #0000ff;">this</span>.model);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> _onModelChange: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Updates canExecute after the model has been updated. Set to true if the current content is</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// a page and the current user has the administer access level; otherwise false.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> model = <span style="color: #0000ff;">this</span>.model,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> canExecute = model && model.capabilities.isPage && ContentActionSupport.hasAccess(model.accessMask, ContentActionSupport.accessLevel.Administer);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.set(<span style="color: #006080;">'canExecute'</span>, canExecute);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">});</pre>
<!--CRLF--></div>
</div>
<p>As you can see the only things that related to the user interface are the properties: label, tooltip, and icon class.</p>
<p>Here you can also see the first method for taking control of the user interface. In the _execute method we publish a topic which tells the main view to display the widget that we pass through; in this case the <span style="font-family: monospace;">addon/view/DynamicProperties</span> widget. We also pass through the model as a parameter to be set on the view since this contains the information about the current page.</p>
<h2>Localization</h2>
<p>You might have noticed that the label and tooltip properties are having their values set from a resource file. This resource file is using the standard EPiServer localization service with the translations coming from a XML file as usual. To use localization in JavaScript we use a special plugin module. This module takes a parameter which is defined after the ! character. In this case the parameter is <span style="font-family: monospace;">epi/nls/addon.dynamicproperties</span>. This parameter is parsed server side; the first part indicates that EPiServer will handle this language resource, the second part indicates that this is a language resource request, and the third part is the usual dot separated path to the localization in the XML file.</p>
<h2>The View</h2>
<p>The view that we’re going to display basically just wraps an iframe. This is because I’m not creating a new edit view for dynamic properties but rather just display the legacy one in the main content area.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">define([</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// General application modules</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #006080;">'dojo/_base/declare'</span>, <span style="color: #006080;">'epi/routes'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Parent classes</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #006080;">'epi/shell/widget/Iframe'</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">], <span style="color: #0000ff;">function</span>(declare, routes, Iframe) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// module:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// addon/view/DynamicProperties</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Displays the legacy dynamic properties edit view for the current page.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> declare([Iframe], {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// baseUrl: [public] String</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// The base URL to the edit dynamic properties page.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> baseUrl: <span style="color: #0000ff;">null</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> constructor: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Construct the dynamic properties view and set the base URL.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// public</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.baseUrl = routes.getActionPath({</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> path: <span style="color: #006080;">'Edit/EditDynProp.aspx'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> moduleArea: <span style="color: #006080;">'LegacyCMS'</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> updateView: <span style="color: #0000ff;">function</span>(data) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Load a new view in the iframe using the base URL and the current page's content link.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// public</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.load(<span style="color: #0000ff;">this</span>.baseUrl, {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> query: {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> id: data.contentLink</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">});</pre>
<!--CRLF--></div>
</div>
<p>So all this really does is get the base URL to the legacy edit dynamic properties view and then append the current page ID to the end as a query parameter.</p>
<h2>Getting the Command into the Main Toolbar</h2>
<p>So now for the next method for taking control of the user interface. While not simple, it is possible to plug into the main toolbar. But first a little explanation.</p>
<p>EPiServer 7 uses a provider and consumer pattern for passing commands around the interface. This allows, for example, a component to say that it provides commands without having to be concerned about where the commands are consumed or how they are displayed. In this example the component toolbar is a consumer and will automatically take those commands and display them how they should be displayed in a toolbar.</p>
<p>So in the global toolbar case, the toolbar is a consumer and it consumes commands that are registered in a named global provider. So we need to add our command to this named provider.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">require([<span style="color: #006080;">'dojo/aspect'</span>, <span style="color: #006080;">'epi/dependency'</span>, <span style="color: #006080;">'addon/command/EditDynamicProperties'</span>], <span style="color: #0000ff;">function</span>(aspect, dependency, EditDynamicProperties) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Initialize the addon by registering the command in the global toolbar.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> handle,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> key = <span style="color: #006080;">'epi.cms.globalToolbar'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> registry = dependency.resolve(<span style="color: #006080;">'epi.globalcommandregistry'</span>),</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> callback = <span style="color: #0000ff;">function</span>(identifier, provider) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">if</span>(identifier !== key) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// When the command provider for the global toolbar is registered add our additional command.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> provider.addCommand(<span style="color: #0000ff;">new</span> EditDynamicProperties(), {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> showLabel: <span style="color: #0000ff;">true</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Remove the aspect handle.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> handle.remove();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> };</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Listen for when the global toolbar command provider is registered in the command provider registry.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> handle = aspect.after(registry, <span style="color: #006080;">'registerProvider'</span>, callback, <span style="color: #0000ff;">true</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">});</pre>
<!--CRLF--></div>
</div>
<p>Here we have a small initialization script that will hook into the provider registration method and when the global toolbar provider is registered we’ll add our command.</p>
<h2>How It Looks</h2>
<p>This is the button in the toolbar</p>
<p><img src="/link/f5f04fade19a4d42b90641e527ad2490.png" alt="" width="214" height="43" /></p>
<p>This is the edit dynamic properties view</p>
<p><img src="/link/1e28834a8c774650a45eb4919bf30d0d.png" alt="" width="564" height="268" /></p>
<p>To make your life easier, I’ve packaged this as an add-on which you can manually upload and install on your site if you want to try it out or you can just extract it to see the code.</p>
<p><a title="Download" href="/link/70e38ccdf460481c9e1208bfbcf1bd01.nupkg" target="_blank">Download</a></p>2012-12-06T18:25:00.0000000ZBlog postUsing contenteditable for editing<h2>Introducing <span style="font-size: 120%; font-family: monospace;">contenteditable</span></h2>
<p>The contenteditable attribute has been around since the good old days of Internet Explorer 5.5 and has finally been introduced into the HTML5 standards and is supported by pretty much every browser (<a title="http://caniuse.com/#feat=contenteditable" href="http://caniuse.com/#feat=contenteditable" target="_blank">http://caniuse.com/#feat=contenteditable</a>). It allows us to edit text directly on an HTML page.</p>
<p id="editable-block">EDIT ME!</p>
<script type="text/javascript">// <![CDATA[
document.getElementById("editable-block").setAttribute("contenteditable", true);
// ]]></script>
<p>With the release of EPiServer 7 we've added a lot of functionality to the editing experience but unfortunately contenteditable didn't make the cut. However with a little spare time after the release I did a little hacking and have created an add-on that can be easily plugged into a site to add contenteditable editing for plain text!</p>
<h2>Editor Wrapper</h2>
<p>In EPiServer 7 properties are associated with a particular editor based on their type. These editors are wrapped by an editor wrapper which generically handles the updating of the content model when a change event occurs in the editor and is also responsible for how the editor appears on screen (e.g. forms mode, floating dialog, or inline textbox).</p>
<p>However, in the contenteditable case, the browser is going to be the editor so there is no need to create a custom editor. Which means that since all the built-in editor wrappers require an editor to be available we need to create a new custom editor wrapper that will start editing when an overlay is clicked and cause changes to be passed to the content model when editing is stopped.</p>
<p>Here's one I prepared earlier:</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">define([</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #006080;">'dojo/_base/declare'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// General application modules</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #006080;">'dojo/_base/array'</span>, <span style="color: #006080;">'dojo/dom-attr'</span>, <span style="color: #006080;">'dojo/dom-style'</span>, <span style="color: #006080;">'dojo/_base/event'</span>, <span style="color: #006080;">'dojo/keys'</span>, <span style="color: #006080;">'dojo/_base/lang'</span>, <span style="color: #006080;">'dojo/on'</span>, <span style="color: #006080;">'dijit/Tooltip'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Parent classes</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #006080;">'epi/cms/contentediting/_EditorWrapperBase'</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">], <span style="color: #0000ff;">function</span>(declare, array, domAttr, domStyle, <span style="color: #0000ff;">event</span>, keys, lang, on, Tooltip, _EditorWrapperBase) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// module:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// addon/wrapper/ContentEditable</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Adds content editable editing functionality for properties marked up with the "contenteditable" wrapper type.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// This editor wrapper doesn't require or support having an editor widget since editing is done directly on</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// the DOM node and is handled by the browser.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> declare([_EditorWrapperBase], {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// regExp: [public] String</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Regular expression string used to validate the input.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> regExp: <span style="color: #006080;">'.*'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> constructor: <span style="color: #0000ff;">function</span>(parameters) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>._handlers = [];</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// HACK: Since this editor wrapper doesn't have an editor widget, mix the editorParams into this.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> lang.mixin(<span style="color: #0000ff;">this</span>, parameters.editorParams);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> delete parameters.editorParams;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> uninitialize: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Ensure the editing features have been removed during destroy.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>._removeEditingFeatures();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> startEdit: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Enable "contenteditable" for the DOM node, connect event listens, and give the editable node focus.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> node = <span style="color: #0000ff;">this</span>.blockDisplayNode;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.inherited(arguments);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>._handlers.push(</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> on(node, <span style="color: #006080;">'blur'</span>, lang.hitch(<span style="color: #0000ff;">this</span>, <span style="color: #006080;">'tryToStopEditing'</span>)), </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> on(node, <span style="color: #006080;">'keydown'</span>, lang.hitch(<span style="color: #0000ff;">this</span>, <span style="color: #006080;">'_processKeyEvent'</span>))</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> );</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> domStyle.set(<span style="color: #0000ff;">this</span>.overlayItem.domNode, <span style="color: #006080;">'visibility'</span>, <span style="color: #006080;">'hidden'</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> domAttr.set(node, <span style="color: #006080;">'contenteditable'</span>, <span style="color: #006080;">'true'</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>._focusContentEditable();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> getEditorValue: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Gets the text content of the DOM node.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// public</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.blockDisplayNode.textContent;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> setEditorValue: <span style="color: #0000ff;">function</span>(value) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Sets the given value as the text content of the DOM node.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// public</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.blockDisplayNode.textContent = value;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> isValid: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Tests if the value is valid.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// public</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> value = <span style="color: #0000ff;">this</span>.getEditorValue(),</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> regex = <span style="color: #0000ff;">new</span> RegExp(<span style="color: #006080;">'^(?:'</span> + <span style="color: #0000ff;">this</span>.regExp + <span style="color: #006080;">')'</span> + (<span style="color: #0000ff;">this</span>.required ? <span style="color: #006080;">''</span> : <span style="color: #006080;">'?'</span>) + <span style="color: #006080;">'$'</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> regex.test(value) && (!<span style="color: #0000ff;">this</span>.required || !<span style="color: #0000ff;">this</span>._isEmpty(value));</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> _onTryToStopWithInvalidValue: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Display a validation error when the user tries to stop editing in an invalid state.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> Tooltip.show(<span style="color: #0000ff;">this</span>.missingMessage, <span style="color: #0000ff;">this</span>.overlayItem.domNode, [<span style="color: #006080;">"before-centered"</span>, <span style="color: #006080;">"after-centered"</span>]);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> _removeEditingFeatures: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Remove the contenteditable attribute from the DOM node and change back to a non-editing state.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// protected</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> domStyle.set(<span style="color: #0000ff;">this</span>.overlayItem.domNode, <span style="color: #006080;">'visibility'</span>, <span style="color: #006080;">'visible'</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> domAttr.remove(<span style="color: #0000ff;">this</span>.blockDisplayNode, <span style="color: #006080;">'contenteditable'</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.blockDisplayNode.blur();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> Tooltip.hide(<span style="color: #0000ff;">this</span>.overlayItem.domNode);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> array.forEach(<span style="color: #0000ff;">this</span>._handlers, <span style="color: #0000ff;">function</span>(handler) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> handler.remove();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> _focusContentEditable: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Focuses the editable node, setting the caret to the end of the text.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// private</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> doc = <span style="color: #0000ff;">this</span>._getDocument(),</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> range = doc.createRange(),</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> selection = doc.getSelection();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Set the range to the entire contents of the node, then collapse the caret to the end.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> range.selectNodeContents(<span style="color: #0000ff;">this</span>.blockDisplayNode);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> range.collapse(<span style="color: #0000ff;">false</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Remove any existing ranges, then make our new range visible.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> selection.removeAllRanges();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> selection.addRange(range);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.blockDisplayNode.focus();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> _getDocument: <span style="color: #0000ff;">function</span>() {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Gets the document for the editable node.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// private</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.blockDisplayNode.ownerDocument;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> _isEmpty: <span style="color: #0000ff;">function</span>(value) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Checks if the value is empty or whitespace.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// private</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span> (/^\s*$/).test(value);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> },</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> _processKeyEvent: <span style="color: #0000ff;">function</span>(e) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Handles keypress events inside the content editable and invokes the relevant action.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// tags:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// private</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">switch</span>(e.keyCode) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">case</span> keys.ESCAPE:</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.cancel();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">break</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">case</span> keys.ENTER:</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">case</span> keys.TAB:</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">event</span>.stop(e);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.tryToStopEditing();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">break</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">default</span>:</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">this</span>.isModified = <span style="color: #0000ff;">true</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">break</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> });</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">});</pre>
<!--CRLF--></div>
</div>
<h2>Editor Descriptor</h2>
<p>Now, in order to make sure that our new editor wrapper is used instead of the default one for a string typed property we need to create an editor descriptor. An editor descriptor allows us to add custom information to the metadata for properties which will then be evaluated by the client side code at runtime. In this case it is as simple as specifying the uiWrapperType. Since we have a custom editor wrapper we’ll give it our own value of “contenteditable”.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">[EditorDescriptorRegistration(TargetType = <span style="color: #0000ff;">typeof</span>(<span style="color: #0000ff;">string</span>), UIHint = <span style="color: #006080;">"contenteditable"</span>)]</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> ContentEditableEditorDescriptor : EditorDescriptor</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">{</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span> ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">base</span>.ModifyMetadata(metadata, attributes);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> metadata.CustomEditorSettings[<span style="color: #006080;">"uiWrapperType"</span>] = <span style="color: #006080;">"contenteditable"</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">}</pre>
<!--CRLF--></div>
</div>
<p>You’ll also notice that I’ve given it a UIHint. This allows us to maintain the default functionality for strings and only use contenteditable where we specify. For example, in the Alloy templates I could change the UIHint for MetaDescription in SitePageData to be "contenteditable".</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">[Display(GroupName = Global.GroupNames.MetaData, Order = 300)]</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">[CultureSpecific]</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">[UIHint(<span style="color: #006080;">"contenteditable"</span>)]</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">virtual</span> <span style="color: #0000ff;">string</span> MetaDescription { get; set; }</pre>
<!--CRLF--></div>
</div>
<p>Which means that MetaDescription will appear like this in on page edit.</p>
<p><img src="/link/66e86eb68bde4ed09f4bad89dece6f2e.png" alt="MetaDescription with contenteditable" width="417" height="141" /></p>
<h2>Initialization</h2>
<p>Now in order to map the “contenteditable” key that we’ve specified as our uiWrapperType to our actual editor wrapper we need to register a new editor wrapper in the editor factory. Unfortunately this is easier said than done. I have a fairly simple solution (*cough* hack *cough*) that will wire everything up nicely and efficiently. It a bit advanced in terms of dojo concepts but it basically listen on the register method of dependency and when the editor factory is registered we add our custom editor wrapper then unhook ourselves.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">require([<span style="color: #006080;">'dojo/aspect'</span>, <span style="color: #006080;">'epi/dependency'</span>], <span style="color: #0000ff;">function</span>(aspect, dependency) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// summary:</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #008000;">// Initialize the addon by registering the contenteditable wrapper in the editor factory.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> handle,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> key = <span style="color: #006080;">'epi.cms.contentediting.EditorFactory'</span>,</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> register = <span style="color: #0000ff;">function</span>(identifier) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #0000ff;">if</span> (identifier !== key) {</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">return</span>;</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> }</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// When the EditorFactory is registered add our additional editor wrapper.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;">var</span> editorFactory = dependency.resolve(key);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> editorFactory.registerEditorWrapper(<span style="color: #006080;">'contenteditable'</span>, <span style="color: #006080;">'addon.wrapper.ContentEditable'</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Remove the aspect handle.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> handle.remove();</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> };</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> </pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"> <span style="color: #008000;">// Listen for when the EditorFactory is registered in the dependency manager.</span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> handle = aspect.after(dependency, <span style="color: #006080;">"register"</span>, register, <span style="color: #0000ff;">true</span>);</pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;">});</pre>
<!--CRLF--></div>
</div>
<p>Adding the following to your module.config will ensure that this script is run when the CMS module is started.</p>
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 300px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;">
<div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">clientResources</span><span style="color: #0000ff;">></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">add</span> <span style="color: #ff0000;">name</span><span style="color: #0000ff;">="epi.cms.widgets.base"</span> <span style="color: #ff0000;">path</span><span style="color: #0000ff;">="ClientResources/addon/initialize.js"</span> <span style="color: #ff0000;">resourceType</span><span style="color: #0000ff;">="Script"</span> <span style="color: #0000ff;">/></span></pre>
<!--CRLF-->
<pre style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; width: 100%; background-color: white; border-style: none; padding: 0px;"><span style="color: #0000ff;"></</span><span style="color: #800000;">clientResources</span><span style="color: #0000ff;">></span></pre>
<!--CRLF--></div>
</div>
<h2>Installing the ContentEditable add-on</h2>
<p>To make your life easier, I’ve packaged this as an add-on which you can manually upload and install on your site if you want to try it out.</p>
<p><a title="ContentEditable 1.0.0.0" href="/link/c0f1f5cdbe4e4323bbf389beee6a1687.nupkg" target="_blank">Download</a></p>
<p>After installing the add-on just set the UIHint for any of your string typed properties to “contenteditable” then build. After refreshing the site those properties will now use contenteditable.</p>2012-11-22T15:38:00.0000000ZBlog post