
Hello, At this time 3 edit modes are available. I wanted to add "Preview Accepted" mode, which will work like Preview + will show content as already Accepted. Because it is very helpful for user to be sure that after Accept all will be fine.
Alternative option to show button in the View tab of the RibbonBar, but Mode toolbox div is more preferable place.
Thank you.
1 Answer, 1 is accepted
Hi Emin,
Thank you for your feature request.
Adding a new edit mode like "Preview Accepted" to the RadEditor is not directly supported through configuration or simple properties. RadEditor's modes are predefined (Design, HTML, and Preview) and the architecture does not support adding custom modes without extensive modifications to the control's core.
However, you can achieve similar functionality by implementing a custom content preview dialog similar to the following one:
Here is how to implement it:
- Add a custom button in your ToolsFile.xml file:
<tools name="TrackChangesToolbar"> <tool name="PreviewAcceptedChanges" Text="Preview Accepted Changes Dialog"/>
- Create an aspx page for the custom dialog: PreviewAcceptedChanges.aspx
<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Preview HTML content as if Accept All Track Changes is fired</title> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> var PreviewerDiv; function getRadWindow() { if (window.radWindow) { return window.radWindow; } if (window.frameElement && window.frameElement.radWindow) { return window.frameElement.radWindow; } return null; } function initDialog() { var clientParameters = getRadWindow().ClientParameters; //return the dialogs arguments from the main page PreviewerDiv = document.getElementById("PreviewerDiv"); PreviewerDiv.innerHTML = clientParameters; } if (window.attachEvent) { window.attachEvent("onload", initDialog); } else if (window.addEventListener) { window.addEventListener("load", initDialog, false); } </script> <fieldset style="width: 800px; height: 600px"> <legend>Preview HTML content as if Accept All Track Changes is fired</legend> <div id="PreviewerDiv" style="overflow:auto;border: 1px solid gray; width: 780px; height: 580px;"></div> </fieldset> </form> </body> </html>
- And configure the editor to load the custom dialog with this code:
<telerik:RadEditor runat="server" ID="RadEditor1" EnableTrackChanges="true" ToolsFile="~/ToolsFile.xml"> <TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings> <Content> <p> <span style="font-size: 11pt; background-color: #ffffff; font-family: Times New Roman;"><strong title="Formatted by RadEditorUser on 9/30/2014, 5:57:29 PM" timestamp="1412089049675" command="Bold" class="reFormat reU0" author="RadEditorUser">RadEditor</strong> is not simply an <strong title="Formatted by RadEditorUser on 9/30/2014, 5:57:34 PM" timestamp="1412089054118" command="Bold" class="reFormat reU0" author="RadEditorUser">HTML</strong> <em title="Formatted by RadEditorUser on 9/30/2014, 5:57:36 PM" timestamp="1412089056325" command="Italic" class="reFormat reU0" author="RadEditorUser">Editor</em>. It is what Microsoft chose to use in <em title="Formatted by RadEditorUser on 9/30/2014, 5:57:43 PM" timestamp="1412089063852" command="Italic" class="reFormat reU0" author="RadEditorUser">MSDN, CodePlex, <del title="Deleted by RadEditorUser on 9/30/2014, 5:57:47 PM" timestamp="1412089067178" command="Delete" class="reU0" author="RadEditorUser"> TechNet</del>, MCMS</em> and even as an alternative to the default editor in SharePoint. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean XHTML output, fast rendering, widest cross-browser support, and tons of features.</span> </p> <p title="Formatted by RadEditorUser on 9/30/2014, 5:57:58 PM" timestamp="1412089078691" command="Indent" class="reFormat reU0" author="RadEditorUser" cssproperty="marginLeft" style="margin-left: 40px;"> <strong><em title="Formatted by RadEditorUser on 9/30/2014, 5:58:07 PM" timestamp="1412089087767" command="Italic" class="reFormat reU0" author="RadEditorUser">Single-file, drag-and-drop deployment</em></strong><span style="font-size: 11pt; background-color: #ffffff; font-family: Times New Roman;"> - RadEditor takes full advantage of .NET embedded resources, enabling you to deploy RadEditor with a single assembly file and jump-start your development process.</span> </p> <p title="Formatted by RadEditorUser on 9/30/2014, 5:58:17 PM" timestamp="1412089097709" command="Indent" class="reFormat reU0" author="RadEditorUser" cssproperty="marginLeft" style="margin-left: 80px;"> <strong><em title="Formatted by RadEditorUser on 9/30/2014, 5:58:23 PM" timestamp="1412089103985" command="Italic" class="reFormat reU0" author="RadEditorUser">Built on top of ASP.NET AJAX</em></strong><span style="font-size: 11pt; background-color: #ffffff; font-family: Times New Roman;"> - RadEditor is a native .Net <del title="Deleted by RadEditorUser on 9/30/2014, 5:58:29 PM" timestamp="1412089109867" command="Delete" class="reU0" author="RadEditorUser"> 2.0</del> component, designed upon ASP.NET AJAX, utilizing its common client-side framework and programming model. This allows for previously impossible performance and architecture optimizations to offer a small-size, efficient and optimized component with industry-unique level of performance.</span> </p> <p style="padding-top: 10px; border-top: 1px solid #555555;"> <a id="HTMLDescription"> <sup title="Formatted by RadEditorUser on 9/30/2014, 5:58:35 PM" timestamp="1412089115955" command="Superscript" class="reFormat reU0" author="RadEditorUser">1</sup>. </a>The computer language used to create world-wide-web pages which are read by browsers. </p> </Content> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.CommandList["PreviewAcceptedChanges"] = function (commandName, editor, args) { var content = editor.get_htmlAcceptChanges() //returns HTML content as if Accept All Track Changes is fired. editor.showExternalDialog( 'PreviewAcceptedChanges.aspx', content, 1000, 800, null, null, 'Insert Link', true, Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, true, true); }; </script>
The example is based on the custom Print Preview dialog showcased in the Custom Dialogs demo.
Regards,
Rumen
Progress Telerik