脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js设置ckeditor数据

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

 更新时间：2023年08月06日 11:56:01   作者：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数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • JavaScript验证一个url的方法总结

    JavaScript验证一个url的方法总结

    最近遇到几次需要校验URL的,使用这篇文章小编就为大家整理了一下几个JavaScript校验URL的方法,文中的示例代码简洁易懂,感兴趣的小伙伴可以了解一下
    2023-12-12
  • js实现上下滑动轮播

    js实现上下滑动轮播

    这篇文章主要为大家详细介绍了js实现上下滑动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 浅谈es6 javascript的map数据结构

    浅谈es6 javascript的map数据结构

    本篇文章主要介绍了浅谈es6 javascript的map数据结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 微信小程序开发的基本流程步骤

    微信小程序开发的基本流程步骤

    这篇文章主要介绍了微信小程序开发的基本流程步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JavaScript进制转换实现方法解析

    JavaScript进制转换实现方法解析

    这篇文章主要介绍了JavaScript进制转换实现方法,结合实例形式分析了JavaScript进制转换中十进制与其他进制转换、以及随机颜色生成相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • JavaScript中.min.js和.js文件的区别讲解

    JavaScript中.min.js和.js文件的区别讲解

    今天小编就为大家分享一篇关于JavaScript中.min.js和.js文件的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-02-02
  • js用于树型结构级联选择

    js用于树型结构级联选择

    js用于树型结构级联选择...
    2007-01-01
  • JavaScript实现消息对话框

    JavaScript实现消息对话框

    这篇文章主要为大家详细介绍了JavaScript实现消息对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JS组件中bootstrap multiselect两大组件较量

    JS组件中bootstrap multiselect两大组件较量

    这篇文章主要介绍了JS组件中bootstrap multiselect两大组件，两者之间的较量，优缺点比较，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 详解JS内存空间

    详解JS内存空间

    因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。为了解决大家的疑惑，本文将详细介绍JS内存空间
    2021-06-06

最新评论