7 7 <ul>
8 8 <li> <a href="#CGI">Using <cite>Fossil</cite>'s Built-In CGI</a>
9 9 </ul>
10 10 <li> <a href="#env">Using Environment variables</a>
11 11 <li> <a href="#css">Example CSS</a>
12 12 <li> <a href="#source-hilight">Source highlighting</a>
13 13 <li> <a href="#win32dev">Fossil Win32 Development Machine setup</a>
14 + <li> <a href="#wysiwig">Javascript HTML WYSIWYG editor control</a>
15 + <ul>
16 + <li> <a href="#tinymce">TinyMCE</a>
17 + <li> <a href="#markitup">markitup!</a>
18 + </ul>
14 19 </ul>
15 20
16 21 <h2><a name="CGI">Using <cite>Fossil</cite>'s Built-In CGI</a></h2>
17 22 <h3>Motivation</h3>
18 23 * You want to share a repository through your existing web infrastructure.
19 24 * You want to share more than one repository at the same time.
20 25
................................................................................
518 523
519 524 <h4>Visual Studio Express 2008+WiX</h4>
520 525 <h5>Setup TCL</h5>
521 526 <h5>Setup VS2008</h5>
522 527 <h5>Getting WiX Windows MSI tool </h5>
523 528 <h5>Getting Fossil source code</h5>
524 529 <h5>Build the code with Makefile.win32</h5>
530 +
531 +<a name="wysiwig"><h2>Javascript HTML WYSIWYG editor control</h2></a>
532 +<h3>Motivation</h3>
533 + * You want to edit the wiki pages with a nice editor component, instead of using plain HTML.
534 +
535 +<h3>Problem</h3>
536 +Fossil by itself doesn't support it.
537 +
538 +<h3>Solution</h3>
539 +There are pure javascript editor components that can be used for this task.
540 +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.
541 +<br>
542 +These two tips are from the mailing list:
543 +Rene de Zwart 30. Oct. 2009
544 +
545 +<a name="tinymce"></a>
546 +<h4>TinyMCE</h4>
547 +<p>
548 +Source: <a href="http://tinymce.moxiecode.com/"> TinyMCE </a>
549 +</p>
550 +<h5> Example</h5>
551 +<pre class="verbatim">
552 + mkdir tiny
553 + mkdir tiny/javascript
554 + fossil new tinymce.fsl
555 + fossil ui tinymce.fsl {configure the project)
556 + download tinymce
557 + unzip in tiny/javascript
558 + cd tiny
559 + fossil open ../tinymce/fsl
560 + fossil add javascript
561 + fossil commit -m "added timymce to the project"
562 + fossil ui
563 +</pre>
564 +Select admin/headers add after the </link>
565 +<pre class="verbatim">
566 + <script type="text/javascript"
567 + src="/doc/tip/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js">
568 + </script>
569 +</pre>
570 +and save
571 +select admin/footer add above the first line
572 +<pre class="verbatim">
573 + <script type='text/javascript'>
574 + var m = document.getElementsByTagName('textarea')
575 + var l = m.length
576 + var n
577 + for(var i=0 ;i < l;i++){
578 + n = m[i].name
579 + if( 'header' != n && 'footer' != n && 'css' != n){
580 + tinyMCE.init({ mode : 'exact' , elements : n, theme: 'advanced'
581 + ,width : '90%' } );
582 + }
583 + }
584 + </script>
585 +</pre>
586 +
587 +
588 +<a name="markitup"></a>
589 +<h3>markitup!</h3>
590 +<p>
591 +Source: <a href="http://markitup.jaysalvat.com/home/"> Markitup </a>
592 +</p>
593 +<h5> Example</h5>
594 +<pre class="verbatim">
595 + mkdir markitup
596 + mkdir markitup/javascript
597 + fossil new markitup.fsl
598 + fossil ui markitup.fsl {configure the project)
599 + download markitup and jquery
600 + unzip in markitup/javascript, cd latest, mv * .., rmdir latest
601 + copy jquery-....js to javascript/jquery.js
602 + cd markitup
603 + fossil open ../markitup.fsl
604 + fossil add javascript
605 + fossil commit -m "added markitup an jquery to the project"
606 + fossil ui
607 +</pre>
608 +select admin/headers add after the </link> put
609 +<pre class="verbatim">
610 + <link rel="stylesheet" type="text/css" href="/doc/tip/javascript/markitup/skins/markitup/style.css" />
611 + <link rel="stylesheet" type="text/css" href="/doc/tip/javascript/markitup/sets/default/style.css" />
612 +
613 + <script type="text/javascript" src="/doc/tip/javascript/jquery.js">
614 + </script>
615 + <script type="text/javascript" src="/doc/tip/javascript/markitup/jquery.markitup.js">
616 + </script>
617 +</pre>
618 +
619 +and save
620 +select admin/footer add above the first line
621 +
622 +<pre class="verbatim">
623 + <script type='text/javascript'>
624 + var m = document.getElementsByTagName('textarea')
625 + var l = m.length
626 + var n
627 + var mySettings = {
628 + nameSpace: "html", // Useful to prevent multi-instances CSS conflict
629 + onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'},
630 + onCtrlEnter: {keepDefault:false, openWith:'\n<p>', closeWith:'</p>\n'},
631 + onTab: {keepDefault:false, openWith:' '},
632 + markupSet: [
633 + {name:'Heading 1', key:'1', openWith:'<h1(!( class="[![Class]!]")!)>', closeWith:'</h1>', placeHolder:'Your title here...' },
634 + {name:'Heading 2', key:'2', openWith:'<h2(!( class="[![Class]!]")!)>', closeWith:'</h2>', placeHolder:'Your title here...' },
635 + {name:'Heading 3', key:'3', openWith:'<h3(!( class="[![Class]!]")!)>', closeWith:'</h3>', placeHolder:'Your title here...' },
636 + {name:'Heading 4', key:'4', openWith:'<h4(!( class="[![Class]!]")!)>', closeWith:'</h4>', placeHolder:'Your title here...' },
637 + {name:'Heading 5', key:'5', openWith:'<h5(!( class="[![Class]!]")!)>', closeWith:'</h5>', placeHolder:'Your title here...' },
638 + {name:'Heading 6', key:'6', openWith:'<h6(!( class="[![Class]!]")!)>', closeWith:'</h6>', placeHolder:'Your title here...' },
639 + {name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'</p>' },
640 + {separator:'---------------' },
641 + {name:'Bold', key:'B', openWith:'<strong>', closeWith:'</strong>' },
642 + {name:'Italic', key:'I', openWith:'<em>', closeWith:'</em>' },
643 + {name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' },
644 + {separator:'---------------' },
645 + {name:'Ul', openWith:'<ul>\n', closeWith:'</ul>\n' },
646 + {name:'Ol', openWith:'<ol>\n', closeWith:'</ol>\n' },
647 + {name:'Li', openWith:'<li>', closeWith:'</li>' },
648 + {separator:'---------------' },
649 + {name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' },
650 + {name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
651 + {separator:'---------------' },
652 + {name:'Clean', replaceWith:function(h) { return h.selection.replace(/<(.*?)>/g, "") } },
653 + {name:'Preview', call:'preview', className:'preview' }
654 + ]
655 + }
656 + for(var i=0 ;i < l;i++){
657 + n = m[i].name
658 + if( 'comment' == n || 'cmappnd' == n || "w" == n){
659 + m[i].id = n
660 + $(document).ready(function() {
661 + $("#" + n).markItUp(mySettings);
662 + });
663 + }
664 + }
665 + </script>
666 + </pre>