引入方式
在系統中引入的方式爲js引入方式。
//jquery基類引入
<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/jquery.js"></script>
//jquery日曆插件引入
<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/cal/ui.datepicker.js"></script>
//jquery文件上傳插件引入
<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/ajaxfileupload.js"></script>
//tinymce引入
<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/tiny_mce/tiny_mce.js"></script>
和其他js控件一樣引入方式一樣，都是用js引入方式實現的。
tinymce的初始化
1. js初始化
<!--smarty的不執行標記//->
{literal}
<script language="javascript">
tinyMCE.init({
// General options
debug : false,//錯誤報告開關
mode : "exact",//用特定的模式
elements : "webeditor_demo1",//容器的id值，將來要在頁面中替換的
theme : "advanced",//皮膚
//加載的插件列表
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,stageindent,example",
//Language package
language : "zh",//語言設定
// 操作框上的功能顯示
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,stageindent,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,example",
//樣式設定
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
//config the link to blank
//valid_elements :"a[href|target=_blank]",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js"
});
</script>
{/literal}
tinymce的初始化要和jquery的引入的位置一致，而不是寫在jquery的$(document).ready(..)裏寫的。 一定要用exact模式，默認模式下，是將tinymce顯示在每個textarea中，定義了id之後就不管是什麼標籤了，如div,span 都可以。
2. 頁面內的初始化
html代碼
<form action="./interface/responsetinymce" method="post">
<div id="webeditor_demo1"></div>
</form>
除了要定義一個id和elements 想對應的容器之外,就是必須要定義一個form 。它的action定義要發送的服務器端地址，他的method定義數據的發送方式。
插件開發
在3.x的tinymce中在tiny_mce/plugins/example有一個插件開發的例子，只要修改程序框架中的代碼爲要完成的功能即可。現在主要講一下“首行縮進”功能的實現。
1．文件
在自己的插件目錄下有倆個文件：
a. editor_plugin.js
b. editor_plugin_src.js
第一個文件是壓縮後的js文件，第二個是自己開發的文件。tinymce推薦的壓縮工具是 jstrim 。Url是http://javascriptcompressor.com/。
2．基本原理
<p style="text-indent:24px;">
This page shows all available buttons and plugins that are included in the TinyMCE core package.There are more examples on how to use TinyMCE in the <a href="http://wiki.moxiecode.com/examples/tinymce/">Wiki</a>.
</p>
實現方法是通過給段落標籤加入style屬性來實現的。
3．tinymce的實現
ed.addCommand('mceStageindent', function() {
//基本變量設置
var ed = tinyMCE.activeEditor, d = ed.dom, s = ed.selection, e, iv, iu , st;
st= s.getNode().style;
var allinline=d.select('p');
var bfontSize=document.body.currentStyle?document.body.currentStyle['fontSize']:
document.defaultView.getComputedStyle(document.body,false)['fontSize'];
iu=/[a-z%]+$/i.exec(bfontSize);//獲得文字的大小
iv=parseInt(bfontSize)*2;//倆個文字的寬度
//實現在選取段落時候縮進段落，不選取則縮進所有段落。
if (s.getContent() != "") {
if (st.textIndent == "" || st.textIndent == "undefined") {
st.textIndent = iv+iu;
}
else {
st.textIndent = '';
}
}else{
if (st.textIndent == "" || st.textIndent == "undefined") {
d.setStyle(allinline, 'text-indent', iv+iu);
}else{
d.setStyle(allinline, 'text-indent', '');
}
}
}
);
