javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js设置ckeditor数据

Javascript获取与设置ckeditor数据的实现方法

作者：mdxy

最近编辑器后台升级成了ckeditor,但原来后台有很多对应编辑器内容的替换功能,那么就需要用js获取ckeditor编辑器里面的内容,这里就为大家介绍一下具体的实现方法

CKeditor编辑器是FCKeditor的升级版本，相对于FCK来说，确实比较好用，加载速度也比较快

例如在页面中载入了ckEditor作为程序内容的输入

页面加载编辑器大约配置如下

<textarea name="content" id="content"></textarea><br>
<input type="submit" value="submit" οnclick="submit()">
<script src="/ckeditor/ckeditor.js"></script>

js配置代码

<script type="text/javascript">
    CKEDITOR.replace('content',{
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html?Type=Files',
        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash'
    });
</script>

页面中是使用Jquery进行页面提交的，但是直接用$("#content").val()或$("textarea").eq(0).val()是无法拿到content内容的。这里我们需要使用ckEditor内置的函数来拿到这个内容。

从CKEditor取数据

var content=CKEDITOR.instances['content'].getData();
//或
var content=CKEDITOR.instances.content.getData();

向CKEditor设置数据时

CKEDITOR.instances['content'].setData('test');
或
CKEDITOR.instances.content.setData('test');

以下是如果通过JS获取CKeditor编辑器的值，用于表单验证

if(CKEDITOR.instances.content.getData()==""){
alert("内容不能为空！");
return false;
}

content是textarea的name

下次发下CKeditor的配置还有上传配置，我只弄了PHP的上传

刚有个朋友反应说FIREFOX下不能判断为空，我稍微修改了下

我的在FF下测试通过了，以下是JS代码

function trim(str){
    return str.replace(/(^/s*)|(/s*$)/g,"");
  }//去掉空格
  var str=CKEDITOR.instances.content.getData();
   str=str.replace("<br />","");
   str=str.replace("<br>","");
   str=trim(str);
    if(str==""){
        alert("内容不能为空！");
        return false;
    }

  具体在使用中去组合，多谢这位朋友的提出

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 (很重要的一个函数)

var cke_arr = CKEDITOR.instances;
eval("var cke_content = CKEDITOR.instances."+ta_id+".getData();");

到此这篇关于Javascript获取与设置ckeditor数据的实现方法的文章就介绍到这了,更多相关js设置ckeditor数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文