KindEditor插件的使用

1、div的设计(form表单提交):

<!--第四栏 发帖-->
            <div class="fabu_tiezhi">
                <form id="example">
                    <div class="fabu_view">
                        <img src="<%=basePath%>img/fabiao_icon.png" alt="发布新帖"
                            title="发布新帖" /><span>发布新帖</span>
                    </div>
                    <div>
                        <input type="text" name="fabuTitle" class="fabu_title"
                            placeholder="请填写标题   此处最多可输入70个字符" maxlength="70" id="fabubiaoti" />
                    </div>
                    <!-- 发帖的正文 -->
                    <div class="fabu_content">
                        <textarea id="kindeditor" name="tcontent"></textarea>
                    </div>
                    <div class="fatie">
                        <div class="fabuStyle">
                            <span>请选择您要发布帖子的类型:</span> <select id="TieZhiLeiXing"
                                name="fabuType" data-options="required:true"
                                style='width:100px;'>
                                <option value="普通留言" selected="true">普通留言</option>
                                <option value="提供产品">提供产品</option>
                                <option value="需要产品">需要产品</option>
                            </select>
                        </div>
                        <input type="button"
                            style="background-image:url('<%=basePath%>img/fatie.png');width:65px;height:32px;"
                            onclick="fabutiezi()" />
                    </div>
                </form>
            </div>
            <!--第四栏 发帖-->

2、初始化编辑器:使用KindEditor插件进行初始化

     var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#kindeditor', {
                        themeType : 'simple',
                        width:'950px',
                        height:'220px',
                       resizeType:'0',
                        cssPath : '<%=basePath%>kindeditor-4.1.10/plugins/code/prettify.css',
                uploadJson : '<%=basePath%>uloadondown.action',//上传的请求
                fileManagerJson : '<%=basePath%>fmanage.action',
                allowFileManager : true ,
             items:[
             'preview', '|', 'justifyleft', 'justifycenter', 'justifyright','|','forecolor','emoticons',
             'bold','italic','underline', '|', 'image', 'multiimage','baidumap','|' 
                  ]

                });
           editor.html("");
        });

3、表单提交操作(txt、编辑器的数据):
这里写图片描述

  //发布
          $.ajax({
                url : "insertTieZi?UserId="+<%=UserId%>,
                type : "post",
                data : $("#example").serialize(),
                dataType : "json",
                async:false,
                success : function(result) {
                    if(result=="OK"){   
                          $.messager.show({
                            title:"系统提示:",
                            msg: "恭喜您,发表成功! 您的帖子将在管理员审核后显示,请耐心等待... ",
                            width:'350',
                            height:'250',
                            timeout:'2000'
                          });
                          $("#fabubiaoti").val("");
                          editor.html("");
                        }
                    else{
                        $.messager.show({
                            title:"系统提示:",
                            msg: "抱歉,您的帖子未成功发布,请重新发布!!!",
                            width:'350',
                            height:'250',
                            timeout:'2000'
                          });
                        }
                    },
                  error:function(e){
                          $.messager.show({
                            title:"系统提示:",
                            msg: "error:与服务器连接失败,请尝试刷新......",
                            width:'350',
                            height:'250',
                            timeout:'2000'
                          });
                         } 
                }); 
           }
        } 

///分析post过程:
这里写图片描述
///保存数据:编辑器中的数据(保存jsp代码,直接解析)
fd

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值