BlogEngine i NicEdit

BlogEngine.NET instaluje się standardowo z edytorem TinyMCE. Z kilku różnych względów nie do końca mi to odpowiadało – postanowiłem więc wstawić w jego miejsce NicEdit. Projekt jest jeszcze w fazie BETA, ale moim skromnym zdaniem zmierza prostą ścieżką prowadzącą niechybnie do sięgnięcia po tytuł “The Best WYSIWYG Editor Ever” (o ile taki powstanie).

Krótka instrukcja wstawienia najbogatszej wersji NicEdit na strony administracyjne:

1. Ze strony projektu (http://nicedit.com/) ściągamy pliki nicEdit.js oraz nicEditorIcons.gif


2. Umieszczamy je w katalogu ~/admin


3. Z kontrolki htmlEditor.ascx usuwamy linijki:
   <%@ Register Src=”tinyMCE.ascx” TagName=”tinyMCE” TagPrefix=”uc1″ %>
   oraz
   <uc1:tinyMCE id=”TinyMCE1″ runat=”server”>


4. Do tejże samej kontrolki wpisujemy:
   <SCRIPT type=”text/javascript”>
   bkLib.onDomLoaded(
   function(){
   new nicEditor({fullPanel:true,iconsPath:'<%=Utils.RelativeWebRoot%>admin/nicEditorIcons.gif’}).panelInstance(‘<%= TinyMCE1.ClientID %>’)
   })
   </SCRIPT>
   <asp:TextBox id=”TinyMCE1″ runat=”server” Rows=”25″ TextMode=”multiline” Width=”100%”>


5. edit: wzbogacamy ten sam plik o linijkę <SCRIPT src=”<%=Utils.RelativeWebRoot%>admin/nicEdit.js” type=text/javascript></SCRIPT> – THX Przemo za czujność!

Włala!

Update 1 (29 lutego 2008):
Dodatkowy tip: aby zwiększyć obszar edytora HTML (czystego HTML dostępnego po kliknięciu na ikonę z niebieskim krzyżykiem) należy edytować plik nicEdit.js, odnaleźć linijkę zawierającą <textarea id=”nicHTMLArea” …. > i zmienić właściwości wg własnych preferencji. Przykładowo u mnie wygląda to teraz tak: <textarea rows=”25″ id=”nicHTMLArea” style=”width: 100%; text-align: left; font-size: 13px; height: 500px; border: 0; border-bottom: 1px solid #ccc;”>.

Update 2 (1 marca 2008):
Małe “issue”: po wyrzuceniu TinyMCE pozbywamy się funkcjonalności AutoSave przy dodawaniu posta. W celu wyeliminowania błędów JavaScript z tym związanych należy zakomentować końcówkę pliku admin/Add_entry.aspx w taki sposób:
<br />
<%–<% if (Request.QueryString[“id”] == null){ %>
<script type=”text/javascript”>
setTimeout(“AutoSave()”, 5000);
</script>
<%} %>
–%>
</asp:Content>.