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

更新时间：2023年08月06日 11:56:01 作者：mdxy

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

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

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

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

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数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

js实现上下左右键盘控制div移动
这篇文章主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
Egg Vue SSR 服务端渲染数据请求与asyncData
这篇文章主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
xml 封装与解析(javascript和C#中)
xml 封装与解析 javascript和C#中的分别实现代码。
2009-07-07
微信小程序使用canvas绘制钟表
这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
本文将详细介绍下如何使用百度地图JSAPI生成的H7N9感染分布图，有对百度api感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
服务端渲染nextjs项目接入经验总结分析
这篇文章主要为大家介绍了服务端渲染nextjs项目接入经验总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
js计时事件实现圆形时钟
这篇文章主要为大家详细介绍了js计时事件实现圆形时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
JS+canvas动态绘制饼图的方法示例
这篇文章主要介绍了JS+canvas动态绘制饼图的方法,结合具体实例形式分析了js+canvas实现饼状图形绘制的相关操作技巧,需要的朋友可以参考下
2017-09-09
深入理解JavaScript系列（14）作用域链介绍(Scope Chain)
在第12章关于变量对象的描述中，我们已经知道一个执行上下文的数据（变量、函数声明和函数的形参）作为属性存储在变量对象中
2012-04-04
基于JS实现漫画中大雨滂沱的效果
这篇文章主要为大家详细介绍了如何利用JavaScript实现漫画中大雨滂沱的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06