需要在页面上使用文本在线编辑器,找到了kindeditor这款,不多说,按照提供的示例使用。
先来看对应的aspx页面对应的部分,代码截图如下:
用的DetailsView控件,采用了母版页。先引入脚本文件:
<script src="../kindeditor/kindeditor-min.js" type="text/javascript"></script>
<script type="text/javascript">
KE.show({id:'txtBody'});
</script>
这种写法,运行后实际没有看到在线编辑器,因为服务器端的控件其对应的客户端ID会自动改变,所以需要用属性ClientID。
KE.show({ id: '<%=TextBox1.ClientID %>' });
运行时,提示错误:当前上下文中不存在名称“txtBody”
实际上在cs代码中也是无法访问该控件,因为它是DetailsView里面的控件。
结合一下jquery强大的选择器,就很容器找到了。注意看第一张图:增加了一个自定义的属性:attr=body(这个可以随意怎么写)。
先引入jquery脚本。
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
var id = $(":input[attr='body']").attr('id');alert(id);看截图:
最后:统一如下:
$(function () {
var id = $(":input[attr='body']").attr('id');
KE.show({id:id});
});
由于DetailSView数据后台自动绑定的,当我们单击[更新]CommandButton后,发现正文部分并没有修改成功!
查看对应的源代码:
<input type="button" name="button" value="取得HTML" οnclick="javascript:alert(KE.html('content1'));" />
断点追踪一下:
发现:浏览器虽然改变了原正文部分的内容,但是提交更新后,发现这里txtBody.Text仍然是修改前的内容,出现了问题!
没办法,<山穷水复疑无路>。看示例:
查看源代码:
afterChange:事件,太好了,这里把浏览器改动的文本传回给textBody对应的客户端控件,说改就改:
再次运行,断点处发现txtBody的文本已经改变,ok,测试成功!清除这些调试代码,运行一样正常!^_^
当然,我们发现KE.$也是选择器,有兴趣的朋友如果不想用jquery的话,可以自行参考。