jQuery 获取 ckeditor 数据 并 提交后台

jQuery 获取 ckeditor 数据 并 提交后台

  1. js
var str=CKEDITOR.instances.fieldContent.getData();
  1. ckeidtor
<div class="control-group" style="margin-left: -100px">
    <label class="control-label">内容:</label>
        <div class="controls">
    <form:textarea id="fieldContent" htmlEscape="true" 
        path="content" rows="4" maxlength="200" class="input-xxlarge required" />
    <sys:ckeditor replace="fieldContent" uploadPath="/field/content" />
        </div>
</div>
  1. ajax 提交数据
 $.ajax({
                            type: 'POST',
                            url : url,
                            data: {"dept":dept,"content":content},             //获取表单数据
                            success : function(data) {
                                if (data.result) {
                                    alert("保存成功");
//                                  window.parent.page();                 //调用父窗体方法,当关闭子窗体刷新父窗体
                                    window.parent.window.jBox.close();    //关闭子窗体
                                } else {
                                    alert("保存失败:"+data.message);
//                                  window.parent.page();
                                    window.parent.window.jBox.close();
                                }
                            }
                        });

QQ 交流群 621031233

CKEditor 编辑器提交内容的方式和普通表单提交没有区别。在后台接收 CKEditor 编辑器提交的内容,可以通过以下步骤实现: 1. 在前端页面中,使用 CKEditor 编辑器生成富文本内容,并将其作为表单元素的值提交后台。例如: ```html <form action="/submit" method="POST"> <textarea name="content" id="editor"></textarea> <button type="submit">提交</button> </form> <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> ``` 2. 在后台接收表单提交数据。由于 CKEditor 生成的内容是富文本格式,因此需要使用相应的富文本编辑器处理工具来解析内容。常用的富文本编辑器处理工具有 `CKEditor` 官方提供的解析工具,以及 `htmlparser2`、`cheerio` 等第三方库。例如,使用 `CKEditor` 官方提供的解析工具 `@ckeditor/ckeditor5-engine` 来解析富文本内容: ```javascript const { HtmlEmbeddingMode } = require( '@ckeditor/ckeditor5-engine' ); const { Parser } = require( '@ckeditor/ckeditor5-engine' ); const content = req.body.content; const parser = new Parser( HtmlEmbeddingMode ); const doc = parser.parse( content ); // 获取文本内容 const text = doc.getRoot().getChildren()[0].data; ``` 以上代码中,`req.body.content` 是表单提交CKEditor 编辑器生成的富文本内容,使用 `@ckeditor/ckeditor5-engine` 库中的 `Parser` 类解析富文本内容,然后通过 `doc.getRoot().getChildren()[0].data` 获取文本内容。 3. 将解析后的内容存储到数据库或文件中,或者进行其他业务逻辑处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值