nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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

Find more posts tagged with

Comments

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><a

utputText 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>
<h

utputText 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>
<h

utputText 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>
<h

utputText 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>
<h

utputText 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>
<h

utputText 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