TinyMCE留言板插件,怎么实现自定义的用户按钮和实现tinymce插件的使用

默认情况下,其按钮标签有很多,常用的解释如下:

’separator’ —— 分隔符

‘bold’ —— 粗体

‘italic’ —— 斜体

‘underline’ —— 下划线

’strikethrough’ —— 删除线

’sub’ —— 上标

’sup’ —— 下标

‘bullist’ —— 无序列表

‘numlist’ —— 有序列表

‘outdent’ —— 减少缩进

‘indent’ —— 增加缩进

‘justifyleft’ —— 局左

‘justifycenter’ —— 局中

‘justifyright’ —— 局右

‘justifyfull’ —— 两端对齐

‘link’ —— 添加/编辑链接

‘unlink’ —— 撤销链接

‘image’ —— 插入图片

‘forecolor’ —— 字体颜色

‘backcolor’ —— 字体背景色

‘charmap’ —— 特殊符号表

‘undo’ —— 撤销

‘redo’ —— 重做

‘formatselect’ —— 格式选择

‘fontselect’ —— 字体选择

‘fontsizeselect’ —— 字号选择

‘cut’ —— 剪切

‘copy’ —— 复制

‘paste’ —— 粘贴

‘pastetext’ —— 以纯文本格式粘贴

‘pasteword’ —— 粘贴 Word 格式内容(这几个粘贴功能还是有点用的,因为这个编辑器在 IE7 下使用 Ctrl + V 粘贴的时候,编辑框内的焦点会跳到第一行去 )

‘removeformat’ —— 移除格式

‘cleanup’ —— 删除冗余代码

‘ltr’ —— 内容从左到右显示(语言文字方向性定义,似乎中文里用不上)

‘rtl’ —— 内容从右到左显示(同上)

‘code’ —— 打开HTML代码编辑器

’spellchecker’ —— 拼写检查

‘hr’ —— 插入水平线

‘anchor’ —— 插入锚标记

‘newdocument’ —— 新建文档(效果和清空内容重写差不多)

‘wp_more’ —— 插入 more 标签

‘wp_page’ —— 插入分页标签

‘wp_help’ —— 帮助

‘wp_adv’ —— 隐藏按钮显隐开关

‘wp_adv_start’ —— 隐藏按钮区起始部分

‘wp_adv_end’ —— 隐藏按钮区结束部分

TinyMCE官方下载地址: http://tinymce.moxiecode.com/download.php

下载完后,把整个tinymce文件里的所有内容放到你的项目中,不能只把tiny_mce.js放入,要把其他都放入,尽管我们在下面的javascript中引用到的只有tiny_mce.js,但这个js是基于其他js和css的。

以下是我自己定义所需的留言板格式

<script src="/test/js/tiny_mce/tiny_mce.js"></script>//这个test是我项目的名字,相应的改为你们的项目名,且不能少
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "content", //
对应下面的textareaID号
theme : "advanced",
plugins : "pagebreak",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,fontsizeselect,backcolor,forecolor,undo,redo,",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
width:700, //
这里设置的是留言板的长宽
height:200,
extended_valid_elements : "a[name|href|target|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
language : "zh" //
这个设置按钮提示语为中文,很有用
});
</script>

嵌入tinymce插件的地方:

<form action="" method="post" >
<table>
<tr>
<td>
<font color="blue">内容:</font>
</td>
</tr>
<tr>
<td>

//这里的id号要对应于javascript中定义的elements名
<textarea id="content" cols="54" rows="6"></textarea>
</td>
</tr>
<tr>
<td width="20%">
<input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>

你可能感兴趣的:(tinymce)