您的位置：首页 > Web前端 > JQuery

用jQuery向FCKEditor插件取值、赋值

2011-12-13 17:37 155 查看

FCKeditor是一款很好用的html在线编辑器，也给用户提供了不少插件接口，因此用起来较得心应手。
公司有用到Jquery框架，有一个模板替换的功能需要用Js来动态改变FCK的值，本人google了下，找到一大虾的一篇文章（原文：jQuery FCKEditor插件取值、赋值），总结了下要实现取值赋值的功能主要有如下几个步骤。

主要步骤：

第一步：导入需要的js文件（根据实际情况修改相应路径）

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

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

第二步：初始化（根据实际情况修改相应路径）

sBasePath = '/duotunkf/fckeditor/' ;#编辑器所在文件夹；

oFCKeditor = new FCKeditor('content') ;

oFCKeditor.BasePath = sBasePath ;

oFCKeditor.Value = 'test' ;

oFCKeditor.ToolbarSet = 'Basic' ;

oFCKeditor.Create() ;

其中content为页面你所绑定的textArea的id或name

第三步：取值

var oEditor = FCKeditorAPI.GetInstance('content');

editorValue = oEditor.GetHTML();

第四步：赋值（更新的时候先把原有的值赋给textarea）

var oEditor = FCKeditorAPI.GetInstance('content');

oEditor.SetHTML("value");

下面是本人写的一个赋值测试程序，供大家参考。源码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/jquery-1.3.2.min.js"></script>

<script src="fckeditor/fckeditor.js"></script>

<script>

$(document).ready(function(){

$("#test").click(function(){

var oEditor = FCKeditorAPI.GetInstance('content');

oEditor.SetHTML($("#test option:selected" ).text());

});

});

</script>

</head>

<body>

<form action="" method="post">

<script>

sBasePath = '/duotunkf/fckeditor/' ;#编辑器所在文件夹；

oFCKeditor = new FCKeditor('content') ;

oFCKeditor.BasePath = sBasePath ;

oFCKeditor.Value = 'test' ;

oFCKeditor.ToolbarSet = 'Basic' ;

oFCKeditor.Create() ;

</script>

<br>

<label for="test">

<select name="test" size="4" id="test">

<option value="1">i.点击这里改变编辑器的值</option>

<option value="2">ii.点击这里改变编辑器的值</option>

<option value="3">iii.点击这里改变编辑器的值</option>

</select>

</label>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航