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>
![用jQuery向FCKEditor插件取值、赋值 用jQuery向FCKEditor插件取值、赋值](https://i-blog.csdnimg.cn/blog_migrate/94c30b1305202c1b51c83ca964d9011c.jpeg)