@@ -9,10 +9,15 @@
</ul>
<li> <a href="#env">Using Environment variables</a>
<li> <a href="#css">Example CSS</a>
<li> <a href="#source-hilight">Source highlighting</a>
<li> <a href="#win32dev">Fossil Win32 Development Machine setup</a>
+ <li> <a href="#wysiwig">Javascript HTML WYSIWYG editor control</a>
+ <ul>
+ <li> <a href="#tinymce">TinyMCE</a>
+ <li> <a href="#markitup">markitup!</a>
+ </ul>
</ul>
<h2><a name="CGI">Using <cite>Fossil</cite>'s Built-In CGI</a></h2>
<h3>Motivation</h3>
* You want to share a repository through your existing web infrastructure.
@@ -520,5 +525,142 @@
<h5>Setup TCL</h5>
<h5>Setup VS2008</h5>
<h5>Getting WiX Windows MSI tool </h5>
<h5>Getting Fossil source code</h5>
<h5>Build the code with Makefile.win32</h5>
+
+<a name="wysiwig"><h2>Javascript HTML WYSIWYG editor control</h2></a>
+<h3>Motivation</h3>
+ * You want to edit the wiki pages with a nice editor component, instead of using plain HTML.
+
+<h3>Problem</h3>
+Fossil by itself doesn't support it.
+
+<h3>Solution</h3>
+There are pure javascript editor components that can be used for this task.
+The source for the editor component is added to the repository. The html header or footer is prepared to include a javascript file and/or a CSS.
+<br>
+These two tips are from the mailing list:
+Rene de Zwart 30. Oct. 2009
+
+<a name="tinymce"></a>
+<h4>TinyMCE</h4>
+<p>
+Source: <a href="http://tinymce.moxiecode.com/"> TinyMCE </a>
+</p>
+<h5> Example</h5>
+<pre class="verbatim">
+ mkdir tiny
+ mkdir tiny/javascript
+ fossil new tinymce.fsl
+ fossil ui tinymce.fsl {configure the project)
+ download tinymce
+ unzip in tiny/javascript
+ cd tiny
+ fossil open ../tinymce/fsl
+ fossil add javascript
+ fossil commit -m "added timymce to the project"
+ fossil ui
+</pre>
+Select admin/headers add after the </link>
+<pre class="verbatim">
+ <script type="text/javascript"
+ src="/doc/tip/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js">
+ </script>
+</pre>
+and save
+select admin/footer add above the first line
+<pre class="verbatim">
+ <script type='text/javascript'>
+ var m = document.getElementsByTagName('textarea')
+ var l = m.length
+ var n
+ for(var i=0 ;i < l;i++){
+ n = m[i].name
+ if( 'header' != n && 'footer' != n && 'css' != n){
+ tinyMCE.init({ mode : 'exact' , elements : n, theme: 'advanced'
+ ,width : '90%' } );
+ }
+ }
+ </script>
+</pre>
+
+
+<a name="markitup"></a>
+<h3>markitup!</h3>
+<p>
+Source: <a href="http://markitup.jaysalvat.com/home/"> Markitup </a>
+</p>
+<h5> Example</h5>
+<pre class="verbatim">
+ mkdir markitup
+ mkdir markitup/javascript
+ fossil new markitup.fsl
+ fossil ui markitup.fsl {configure the project)
+ download markitup and jquery
+ unzip in markitup/javascript, cd latest, mv * .., rmdir latest
+ copy jquery-....js to javascript/jquery.js
+ cd markitup
+ fossil open ../markitup.fsl
+ fossil add javascript
+ fossil commit -m "added markitup an jquery to the project"
+ fossil ui
+</pre>
+select admin/headers add after the </link> put
+<pre class="verbatim">
+ <link rel="stylesheet" type="text/css" href="/doc/tip/javascript/markitup/skins/markitup/style.css" />
+ <link rel="stylesheet" type="text/css" href="/doc/tip/javascript/markitup/sets/default/style.css" />
+
+ <script type="text/javascript" src="/doc/tip/javascript/jquery.js">
+ </script>
+ <script type="text/javascript" src="/doc/tip/javascript/markitup/jquery.markitup.js">
+ </script>
+</pre>
+
+and save
+select admin/footer add above the first line
+
+<pre class="verbatim">
+ <script type='text/javascript'>
+ var m = document.getElementsByTagName('textarea')
+ var l = m.length
+ var n
+ var mySettings = {
+ nameSpace: "html", // Useful to prevent multi-instances CSS conflict
+ onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'},
+ onCtrlEnter: {keepDefault:false, openWith:'\n<p>', closeWith:'</p>\n'},
+ onTab: {keepDefault:false, openWith:' '},
+ markupSet: [
+ {name:'Heading 1', key:'1', openWith:'<h1(!( class="[![Class]!]")!)>', closeWith:'</h1>', placeHolder:'Your title here...' },
+ {name:'Heading 2', key:'2', openWith:'<h2(!( class="[![Class]!]")!)>', closeWith:'</h2>', placeHolder:'Your title here...' },
+ {name:'Heading 3', key:'3', openWith:'<h3(!( class="[![Class]!]")!)>', closeWith:'</h3>', placeHolder:'Your title here...' },
+ {name:'Heading 4', key:'4', openWith:'<h4(!( class="[![Class]!]")!)>', closeWith:'</h4>', placeHolder:'Your title here...' },
+ {name:'Heading 5', key:'5', openWith:'<h5(!( class="[![Class]!]")!)>', closeWith:'</h5>', placeHolder:'Your title here...' },
+ {name:'Heading 6', key:'6', openWith:'<h6(!( class="[![Class]!]")!)>', closeWith:'</h6>', placeHolder:'Your title here...' },
+ {name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'</p>' },
+ {separator:'---------------' },
+ {name:'Bold', key:'B', openWith:'<strong>', closeWith:'</strong>' },
+ {name:'Italic', key:'I', openWith:'<em>', closeWith:'</em>' },
+ {name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' },
+ {separator:'---------------' },
+ {name:'Ul', openWith:'<ul>\n', closeWith:'</ul>\n' },
+ {name:'Ol', openWith:'<ol>\n', closeWith:'</ol>\n' },
+ {name:'Li', openWith:'<li>', closeWith:'</li>' },
+ {separator:'---------------' },
+ {name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' },
+ {name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
+ {separator:'---------------' },
+ {name:'Clean', replaceWith:function(h) { return h.selection.replace(/<(.*?)>/g, "") } },
+ {name:'Preview', call:'preview', className:'preview' }
+ ]
+ }
+ for(var i=0 ;i < l;i++){
+ n = m[i].name
+ if( 'comment' == n || 'cmappnd' == n || "w" == n){
+ m[i].id = n
+ $(document).ready(function() {
+ $("#" + n).markItUp(mySettings);
+ });
+ }
+ }
+ </script>
+ </pre>
Changes To Cookbook