Arch-05-09- 给 JAMWiki 加上 FCKEditor 再加个语法高亮SyntaxHighlighter

比较了一大堆开源免费类的 java wiki ，发现真难找到一个好用的东东，JAMWiki 还算不错，除了编辑器比较差以外，关键是够简单。人人网好象用的这个东东，纯属猜测哈。

 

动手集成个编辑器吧。

 

http://jamwiki.org/wiki/en/Tech:FCKEditor_Integration#Initial_version

 

 

增加 FckEditor 的简单方式 

下载

• fckeditor-java-demo-2.6.war

修改 WEB-INF\jsp\edit.jsp

you are needs to add some code like this:

...
<c:choose>
           <c:when test="${editor == 'toolbar'}">
                     <%@ include file="editor-toolbar-include.jsp" %>
           </c:when>
           <c:when test="${editor == 'fckeditor'}">
                     <%@ include file="editor-fckeditor-include.jsp" %>
           </c:when>
</c:choose>
   <c:choose>
              <c:when test="${editor == 'toolbar'}">
  <p>
<textarea id="topicContents" name="contents" rows="25" cols="80" accesskey=",">
<c:out value="${contents}" escapeXml="true" /></textarea>
 </p>
     </c:when>
   </c:choose>
...

create WEB-INF\jsp\editor-fckeditor-include.jsp

<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>

<script type="text/javascript">

                                function FCKeditor_OnComplete(editorInstance) {

                                           window.status = editorInstance.Description;

                                }

                     </script>

<FCK:editor instanceName="contents">

<jsp:attribute name="value">${contents}</jsp:attribute>

</FCK:editor>

modify WEB-INF\classes\jamwiki-configuration.xml

...
<editors>
           <editor>
                     <name>None</name>
                     <key>none</key>
           </editor>
           <editor>
                     <name>Toolbar</name>
                     <key>toolbar</key>
           </editor>
           <editor>
                     <name>FCKEditor</name>
                     <key>fckeditor</key>
           </editor>
</editors>
...

add fckeditor-java files

1. unzip fckeditor-java-demo-2.6.war
2. copy WEB-INF\lib and WEB-INF\classes folder to jamwiki \WEB-INF folder
3. copy fckeditor folder to jamwiki \ folder\
4. it will looks like this

   jamwiki\
           +->fckeditor
           +->WEB-INF\
                     +->lib\
                           \commons-fileupload-1.2.1.jar
                           \commons-io-1.3.2.jar
                           \imageinfo-1.9.jar
                           \java-core-2.6.jar
                           \slf4j-api-1.5.8.jar
                           \slf4j-simple-1.5.8.jar
                     +->classes\
                               \fckeditor.properties
   

restart your app server

(If you install Jamwiki on Tomcat)

1. shutdown your tomcat
2. startup your tomcat

select your default editor

1. click the page Special:Account at your jamwiki
2. select your Preferred editor

you can select the option - FCKEditor

then click "Save" button

finish to add editor to jamwiki

• Now you can create new page to edit it then save it , you can see its work.
• If you don't like FCKEditor , your can go back to Special:Account at your jamwiki
  reselect your Preferred editor like "Toolbar"

 

=================================================================

 

起来了，但高度不够，改设置：

如果你在jsp中使用了FCKeditor，例如：
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
...
<FCK:editor instanceName="content" toolbarSet="Custom" height="600px">
<jsp:attribute name="value">
    <%=MyHtmlUtils.htmlUnescape(desc) %>
</jsp:attribute>
<jsp:body>
   <FCK:config SkinPath="skins/default/" />
   <FCK:config DisplayErrors="false" />
</jsp:body>
</FCK:editor>


你可以通过设置height属性来调整高度，如红色字体所显示的

 

 

=================================================================

加了个 FCKEditor 还是不好用，编辑 wiki 语法比较难搞。

发现了一个将 html 转成 wiki 的在线工具，还算顺手。

http://toolserver.org/~diberri/cgi-bin/html2wiki/index.cgi

 

 

=================================================================

实际使用后发现，直接使用 wiki 语法编辑更方便。

 

默认的安装在 windows 下面没有乱码，在 centos 下的 mysql 就会产生乱码， 需要修改数据库连接：

 

jdbc:mysql://localhost:3306/jamwiki?useUnicode=true&characterEncoding=GBK

 

=================================================================

怎么也得装个语法高亮才对得住吧，测试了几个，比较了 highlight.js 和 syntaxhighlighter，最终决定用 syntaxhighlighter 

http://alexgorbatchev.com/SyntaxHighlighter/，因为 Jamwiki 自动将 <pre></pre>内的东东阉割了，无法 DOM 格式化，则无法使用 highlight.js 而 syntaxhighlighter 比较强悍，直接将 <pre></pre> 内的文本格式化。

需要几个步骤：

（1）当然是下载：http://alexgorbatchev.com/SyntaxHighlighter/download/ 站点上下载syntaxhighlighter_3.0.83.zip

（2）解压到 jamwiki 根目录下，将syntaxhighlighter_3.0.83目录名改成 sh，简短点。

（3）修改 jamwiki/WEB-INF/jsp/top.jsp 第45行加入

 

	
        <script type="text/javascript" src="<c:url value="/sh/scripts/shCore.js" />"></script>
	<script type="text/javascript" src="<c:url value="/sh/scripts/shBrushJScript.js" />"></script>
	<link type="text/css" rel="stylesheet" href="<c:url value="/sh/styles/shCoreDefault.css" />"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script> 

 

（4）测试一段代码

<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

 

（5）如果不是特别倒霉，就应该可以看到图片中的形状了