A WYSIWYG editor control that can be used in templates.
Introduction
The WYSIWYG html editor used in edit can't be used in visit due to a number dependencies on some functionality in edit. The forum and blog modules needed an editor for use in templates. So we have developed an editor control that works in visit mode, and that has functionality more suitable for the simple editing usually done in templates.
You can use the control like this:
<waf:EditorVisitMode runat="server" Height="300" ID="editorContent" Width="650"></waf:EditorVisitMode>
The editor supports adding images inside the text, based on the files the user uploads to the content being edited/created. In order for the system to know which property to look for files in, as well which content class the content being edited/created is. This is set using the ImageFolderPropertyId and DialogueContentType. Set them like this:
editorContent.ImageFolderPropertyId = LocalBranchNewsletter.PropertyIdFiles;
editorContent.DialogueContentType = "LocalBranchNewsletter";
You can use the buttons configured as default, or you can override which buttons to show. This is done using the EditorSettings class. Use the AddSetting method to add the buttons you want to use. The key is the different main settings used by TinyMCE editor. The buttons are stored by these keys:
| Key name: |
Default value: |
| theme_advanced_buttons1 |
bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,code,wafinsertimage |
| theme_advanced_buttons2 |
[empty] |
| theme_advanced_buttons3 |
[empty] |
| theme_advanced_buttons4 |
[empty] |
In addition to the buttons, you can change other settings for the editor:
| Key name: |
Default value: |
| plugins |
wafinsertimage,inlinepopups |
| theme |
advanced |
| remove_linebreaks |
false |
| theme_advanced_toolbar_align |
left |
| theme_advanced_statusbar_location |
bottom |
| extended_valid_elements |
pre[class] |
| theme_advanced_toolbar_location |
top |
EditorSettings settings = new EditorSettings();
settings.AddSetting("theme_advanced_buttons1", "formatselect,bold,italic,underline,separator,strikethrough,table,bullist,numlist,undo,redo,link,unlink,code,wafinsertimage");
editorContent.EditorSettings = settings;
Setting the content
When the control is loaded, it will be empty unless you tell it what content should be editable. You set the initial content of the editor using the Html property.
You also need to set the ContentKey property. The ContentKey is used in conjunction with the DialogueContentType and ImageFolderPropertyId properties to display the correct images in the Insert Image dialogue.
editorContent.Html = page.Content;
editorContent.ContentKey = page.Key.ToString();