TinyMCE如何使用

html-css015

TinyMCE如何使用,第1张

你把js文件的路径改成相对路径应该可以:

src="/js/jscripts/tiny_mce/tiny_mce.js"

没记错的话,这里的第一个/代表主机根目录

改成:

src="js/jscripts/tiny_mce/tiny_mce.js"

不行hi我

1、给你的table加一个id。

2、在form里添加一个隐藏项。

3、在页面向php提交数据时候,这里假设使用post方法。用js获取table的行数,添加到隐藏域里。

给你一个例子,动态添加的也一样可以取到行数。

不明白再问吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<script language="javascript">

function getRows()

{

var t = document.getElementById("tt")

var h = document.getElementById("hiddenCount")

h.value = t.rows.length

alert(t.rows.length)

return true

}

</script>

</head>

<body>

<table width="200" border="1" id="tt">

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

<form id="form1" name="form1" method="post" action="test.php" onsubmit="return getRows()">

<input name="hiddenCount" type="hidden" id="hiddenCount" />

<input type="submit" name="Submit2" value="提交" />

</form>

</body>

</html>

最近准备在自己的一个项目中使用开源的web编辑器TinyMce,遇到了程序获取设置TineMce编辑器内容的问题。用google搜索到了一些眉目,先总结如下。

1.先讲怎么设置TinyMce编辑器的内容

(1)如果在初始化编辑器之前,已经给编辑器所处的控件设置了内容,那么TinyMce在初始化的时候,会自动获取控件的内容。

(2)在客户端可以用下面的函数来随时获取内容:

<script language="javascript" type="text/javascript">

<!--

//功能:获取TinyMce编辑器的内容

//参数:editorId——编辑器的id

//返回:内容字符串;如果失败,返回空字符串

function GetTinyMceContent(editorId)

...{

return tinyMCE.getInstanceById(editorId).getBody().innerHTML

}

//功能:设置TinyMce编辑器的内容

//参数:editorId——编辑器的id

//content——内容

//返回:(无)

function SetTinyMceContent(editorId,content)

...{

tinyMCE.getInstanceById(editorId).getBody().innerHTML=content

}

//-->

</script>

2.我们再来看看如何获取TinyMce编辑器的内容

(1)在页面提交(即执行Submit())之后,TinyMce会自动将内容写入到控件中。

(2)在客户端还可以用下面的函数来随时获取编辑器的内容

<script language="javascript" type="text/javascript">

<!--

//功能:获取TinyMce编辑器的内容

//参数:editorId——编辑器的id

//返回:内容字符串;如果失败,返回空字符串

function GetTinyMceContent(editorId)

...{

return tinyMCE.getInstanceById(editorId).getBody().innerHTML

}

//-->

</script>

3.下面是一个完整的asp.net例子:

为了使用该示例,您必须下载有TinyMce,并放置在目录“tiny_mce”中。

<%@ Page Language="C#" CodeFile="TinyMceTest.aspx.cs" Inherits="TinyMceTest" validateRequest=false %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>无标题页</title>

<!-- tinyMCE -->

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

// Notice: The simple theme does not use all options some of them are limited to the advanced theme

tinyMCE.init({

mode : "textareas",

theme : "advanced",

plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

theme_advanced_buttons1_add_before : "save,newdocument,separator",

theme_advanced_buttons1_add : "fontselect,fontsizeselect",

theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",

theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",

theme_advanced_buttons3_add_before : "tablecontrols,separator",

theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",

theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,|,code",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_path_location : "bottom",

content_css : "example_full.css",

plugin_insertdate_dateFormat : "%Y-%m-%d",

plugin_insertdate_timeFormat : "%H:%M:%S",

extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",

external_link_list_url : "example_link_list.js",

external_image_list_url : "example_image_list.js",

flash_external_list_url : "example_flash_list.js",

media_external_list_url : "example_media_list.js",

template_external_list_url : "example_template_list.js",

file_browser_callback : "fileBrowserCallBack",

theme_advanced_resize_horizontal : false,

theme_advanced_resizing : true,

nonbreaking_force_tab : true,

apply_source_formatting : true,

template_replace_values : {

username : "Jack Black",

staffid : "991234"

}

})

</script>

<!-- /tinyMCE -->

</head>

<body>

<form id="form1" runat="server">

<div>

TinyMce测试页面<br />

<textarea id="edt1" rows="6" cols="20">这是第一个编辑框</textarea><br />

<asp:TextBox ID="edt2" TextMode="MultiLine" Text="这是第2个编辑框" runat="server" Height="79px"></asp:TextBox>

<br />

<input type="button" id="btnGetContent" value="Get Content" onclick="alert(GetTinyMceContent('edt1'))" />

<input type="button" id="btnSetContent" value="Set Content" onclick="var cnt='这是测试<b>内</b>容设置'alert(cnt)SetTinyMceContent('edt2',cnt)" />

<asp:Button ID="btnSubmit" runat="server" Text="Button" OnClick="btnSubmit_Click" />

</div>

</form>

<script language="javascript" type="text/javascript">

<!--

//功能:获取TinyMce编辑器的内容

//参数:editorId——编辑器的id

//返回:内容字符串;如果失败,返回空字符串

function GetTinyMceContent(editorId)

{

return tinyMCE.getInstanceById(editorId).getBody().innerHTML

}

//功能:设置TinyMce编辑器的内容

//参数:editorId——编辑器的id

//content——内容

//返回:(无)

function SetTinyMceContent(editorId,content)

{

tinyMCE.getInstanceById(editorId).getBody().innerHTML=content

}

//-->

</script>

</body>

</html>