【ExtJs】ExtJs的富⽂本编辑器
对于ExtJs表单中的多⾏⽂本框，本⾝就⾃带⼀个没有格式的textareafield。
如果要呈现⼀个带格式的⽂本编辑器给⽤户，ExtJs本⾝就⾃带⼀个htmlEditor。
⼀、基本⽬标
⽐如下图的带编辑器的⽂本框。
这个组件具有加粗、斜体、下划线，增加减少字号，颜⾊等功能，⽽且⾃动会对⽂本⾃动编码，⽆需担⼼跨站攻击，只要在后台防范好SQL 注⼊就可以了。
如下图，即使在⽂本框输⼊如下⽹页脚本，也是能够正常运⾏的。
⼆、基本思想
asp富文本编辑器
⾸先，这个⽹页在ExtJs的布局如下，这个组件是由⼀个含有bbar的表单⾯板中，内含⼀个htmleditor与panel所组成。panel⽤来显⽰编辑之后的内容。在bbar中含有⼀个按钮，点击确定之后，htmleditor⾥的内容会提交到后台的formSubmit.php，然后后台再回调数据填充panel的内容。这个是ExtJs表单提交的基本机制，与《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（）中的⼀模⼀样。你可以同时在formSubmit.php把数据⼊库。然后在本页⼀开始就利⽤《【ExtJs】ExtJs的Ajax》（）的⽅式，在⼀开始就把数据库中的内容加载到panel⾥，这⾥为了简单说明，没有数据库这⼀步。
三、制作过程
1、ExtEditor.html中的html部分同样是什么都没有，直接把form.panel渲染到body标签中直接显⽰。设置好宽度为700与表单的提交⽅式为post，与《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（）中同样，使⽤anchor布局来布置表单⾯板。⾥⾯放置⼀个htmleditor，这个htmleditor要指明⼀个name属性给formSubmit.php获取数据。不提供改变字体的功能，因为这个编辑器仅能改变成各种英⽂字体，中⽂字体，什么宋体之类的⼀律没有。不过这很正常，在⽹页中本来就不应该出现字体设置。之后，与《【ExtJs】tabPanel标签页与修改标签页的内容》（）中⼀样，panel同样要在html设置⼀个带id的div，才能被控制，bbar左右放置两个占位符，然后中间就放⼀个按钮。表单提交成功之后，马上把formSubmit.php返回的msg放到panel⾥⾯。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>extExtEditor</title>
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
<link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<script>
var form1 = ate('Ext.form.Panel', {
renderTo: Body(),
width: 700,
method: 'POST',
layout: 'anchor',
title: 'Ext编辑器',
items: [{
xtype: 'htmleditor',
anchor: '100%',
name: 'content',
height: 250,
enableFont: false
}, {
xtype: 'panel',
anchor: '100%',
title: '编辑的内容',
height: 250,
html: '<div id="viewcontent"></div>'
}],
bbar: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: '确定',
disabled: true,
formBind: true,
listeners: {
click: function(){
var thisForm = Form();
thisForm.submit({
url: "formSubmit.php",
success: function(form, action){
}
});
}
}
}, {
xtype: 'tbfill'
}]
});
})
});
</script>
2、formSubmit.php⾮常简单，获取ExtEditor.html传过来的content，按照ExtJs要求的⽅式打印相应的Json就可以了。正常来说，还应该如《【php】使⽤重定向，伪装表单处理页⾯不存在》（ ）中⼀样，先判断content是否为空，防⽌⽤户直接通过输⼊⽹址的⽅式，访
问这⼀页。Aspx与Jsp的玩家请⾃便……在页⾯获取参数，打印个字符串，是⾮常简单的。
<?php
$content=$_REQUEST["content"];
echo "{
'success':true,
'msg':'{$content}'
}";
>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。