ExtJS——文本编辑器

最新推荐文章于 2024-09-08 09:52:21 发布

木然绽放

最新推荐文章于 2024-09-08 09:52:21 发布

阅读量867

点赞数

分类专栏： ExtJS4

本文链接：https://blog.youkuaiyun.com/u013127751/article/details/65441933

版权

ExtJS4 专栏收录该内容

18 篇文章

订阅专栏

这篇博客展示了如何使用ExtJS框架创建一个文本编辑器。通过一个包含HTML编辑器组件的表单，用户可以编辑内容，并通过点击'确定'按钮提交。提交的内容会被发送到php/formSubmit.php，服务器端接收到内容并返回成功响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    var form = new Ext.form.FormPanel({
          renderTo:Ext.getBody(),
          width:700,
          method:'POST',
          layout:'anchor',//这个布局将子元素的位置与父容器大小进行关联固定. 如果容器大小改变, 所有固定的子项将按各自的anchor 规则自动被重新渲染固定.-取值：Auto  - card - fit - hbox - vbox - anchor - table column border accordion  没有form
          titile:'EXT文本编辑器',
          items:[{
            xtype:'htmleditor',
            anchor:'100%',
            name:'content',
            height:250,
            enableFont:true,//是否启用选择字体按钮。
        },{
            xtype:'panel',
            anchor:'100%',
            title:'编辑的内容',
            height:250,
            html:"<div id='viewcontent'></div>"
        }],
        bbar:[{
            xtype:'tbfill',//一个非渲染的占位符控件,通知工具栏的布局开始使用右对齐的按钮容器方式. 
        },{
            xtype:'button',
            text:'确定',
           // disabled:true,//True时为不可用.
            //formBind:true,
            listeners:{
                click:function(){
                    var thisForm = form.getForm();
                    thisForm.submit({
                        url:'php/formSubmit.php',
                        success:function(form,action){
                            Ext.getDom('viewcontent').innerHTML = action.result.msg;
                        }
                    })
                }
            }
        },{xtype:'tbfill'}]
    });
});
</script>
</body>
</html>

formSubmit.php
<?php  
$content=$_REQUEST["content"];  
$res=array('success'=>true,'msg'=>$content);
echo json_encode($res);  
?>