Discussion : HTML editor

[dbrunner]

Is it planned to have the possibility to add notes in a discussion via an HTML editor, the same that can be used for adding html content ?

Regards.
Daniel

[alexander]

Hi. Just did it.

Needed to modify 2 files in "tomcat\webapps\alfresco\jsp\forums"

1) create-reply-dialog.jsp:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>

<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/scripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
<%– Init the Tiny MCE in-line HTML editor –%>
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "dialog:dialog-body:editor",
save_callback : "saveContent",
onchange_callback : "enableSave",
plugins : "table",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_disable: "styleselect",
extended_valid_elements : "a[href|target|name],font[face|size|color|style],span[class|align|style]"
});

function saveContent(id, content)
{
document.getElementById("dialog:dialog-body:editor-output").value = content;
}

var isIE = (document.all);

</script>

<h:panelGrid cellpadding="2" cellspacing="2" border="0" width="100%"
rowClasses="wizardSectionHeading, paddingRow">
<h:outputText value="#{msg.message}" />
<h:panelGrid cellpadding="2" cellspacing="6" border="0" columns="3"
columnClasses="alignTop, alignTop, alignTop">


<h:graphicImage value="/images/icons/required_field.gif" alt="#{msg.required_field}" />
<h:outputText value="#{msg.message}:" />
<h:inputTextarea id='editor'  value="#{DialogManager.bean.content}" style="display:none; width:100%" />
<h:inputHidden id="editor-output" value="#{DialogManager.bean.content}" />



</h:panelGrid>
</h:panelGrid>



<script type="text/javascript">
function enableSave()
{
document.getElementById("dialog:finish-button").disabled = false;
}
</script>

<h:outputText value="#{ForumsBean.replyBubbleHTML}" escape="false" />

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And 2) create-post-dialog.jsp:
Exactly same but without last lino of code.

It works quite nice.

Thanks
Alexander

[dbrunner]

Great, it's working fine. I just modified also the create-topic-dialog.jsp in the same way. I'll test it and post the solution here next week.

Daniel

[alexander]

Hi

It does require some more attention on input validation - 2 fields have to be checked.

I was not checking for text length, opposed to what original code was doing. Instead, just checked that user did some input into reach editor.

Thanks
Alexander

[dbrunner]

Here is "my" code for the create-topic-dialog.jsp.

<%–
* Copyright (C) 2005-2007 Alfresco Software Limited.

* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.

* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.

* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.

* As a special exception to the terms and conditions of version 2.0 of
* the GPL, you may redistribute this Program in connection with Free/Libre
* and Open Source Software ("FLOSS") applications as described in Alfresco's
* FLOSS exception.  You should have recieved a copy of the text describing
* the FLOSS exception, and it is also available here:
* http://www.alfresco.com/legal/licensing"
–%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>

<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/scripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
<%– Init the Tiny MCE in-line HTML editor –%>
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "dialog:dialog-body:editor",
save_callback : "saveContent",
onchange_callback : "enableSave",
plugins : "table",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_disable: "styleselect",
extended_valid_elements : "a[href|target|name],font[face|size|color|style],span[class|align|style]"
});

function saveContent(id, content)
{
document.getElementById("dialog:dialog-body:editor-output").value = content;
}

var isIE = (document.all);

</script>

<f:verbatim>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/validation.js"> </script>

<script type="text/javascript">
var finishButtonPressed = false;
window.onload = pageLoaded;

function pageLoaded()
{
document.getElementById("dialog:dialog-body:name").focus();
document.getElementById("dialog").onsubmit = validate;
document.getElementById("dialog:finish-button").onclick = function() {finishButtonPressed = true; clear_dialog();}
checkButtonState();
}

function checkButtonState()
{
if (document.getElementById("dialog:dialog-body:name").value.length == 0 )
{
document.getElementById("dialog:finish-button").disabled = true;
}
else
{
document.getElementById("dialog:finish-button").disabled = false;
}
}

function validate()
{
if (finishButtonPressed)
{
finishButtonPressed = false;
return validateName(document.getElementById("dialog:dialog-body:name"),
'</f:verbatim><autputText value="#{msg.validation_invalid_character}" /><f:verbatim>',
true);
}
else
{
return true;
}
}

</script>

<table cellpadding="2" cellspacing="2" border="0" width="100%">
<tr>
<td colspan="3" class="wizardSectionHeading">
</f:verbatim>
<hutputText value="#{msg.properties}" />
<f:verbatim>
</td>
</tr>
<tr>
<td align="middle">
</f:verbatim>
<h:graphicImage value="/images/icons/required_field.gif" alt="#{msg.required_field}" />
<f:verbatim>
</td>
<td>
</f:verbatim>
<hutputText value="#{msg.subject}:" />
<f:verbatim>
</td>
<td width="85%">
</f:verbatim>
<h:inputText id="name" value="#{DialogManager.bean.name}" size="35" maxlength="1024"
onkeyup="javascript:checkButtonState();" onchange="javascript:checkButtonState();" />
<f:verbatim>
</td>
</tr>
<tr>
<td></td>
<td>
</f:verbatim>
<hutputText value="#{msg.icon}:" />
<f:verbatim>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0"><tr><td>
</f:verbatim>
<a:imagePickerRadioPanel id="space-icon" columns="6" spacing="4" value="#{DialogManager.bean.icon}"
panelBorder="greyround" panelBgcolor="#F5F5F5">
<a:listItems value="#{DialogManager.bean.icons}" />
</a:imagePickerRadioPanel>
<f:verbatim>
</td></tr></table>
</td>
</tr>
<tr><td class="paddingRow"></td></tr>
<tr>
<td colspan="3" class="wizardSectionHeading">
</f:verbatim>
<hutputText value="#{msg.message}" />
<f:verbatim>
</td>
</tr>
<tr><td class="paddingRow"></td></tr>
<tr>
<td valign="top">
</f:verbatim>
<h:graphicImage value="/images/icons/required_field.gif" alt="#{msg.required_field}" />
<f:verbatim>
</td>
<td valign="top">
</f:verbatim>
<hutputText value="#{msg.message}:" />
<f:verbatim>
</td>
<td valign="top">
</f:verbatim>
<h:inputTextarea id='editor'  value="#{DialogManager.bean.message}" style="display:none; width:100%" />
<h:inputHidden id="editor-output" value="#{DialogManager.bean.message}" />
<f:verbatim>
</td>
</tr>
</table>
</f:verbatim>

Daniel