【ExtJs】ExtJs的富文字編輯器

阿新 • • 發佈：2019-01-16

對於ExtJs表單中的多行文字框，本身就自帶一個沒有格式的textareafield。

如果要呈現一個帶格式的文字編輯器給使用者，ExtJs本身就自帶一個htmlEditor。

一、基本目標

比如下圖的帶編輯器的文字框。

這個元件具有加粗、斜體、下劃線，增加減少字號，顏色等功能，而且自動會對文字自動編碼，無需擔心跨站攻擊，只要在後臺防範好SQL注入就可以了。

如下圖，即使在文字框輸入如下網頁尾本，也是能夠正常執行的。

二、基本思想

首先，這個網頁在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" "http://www.w3.org/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>
    Ext.onReady(function(){
        Ext.onReady(function(){
            var form1 = Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                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 = form1.getForm();
                            thisForm.submit({
                                url: "formSubmit.php",
                                success: function(form, action){
                                    Ext.getDom("viewcontent").innerHTML = action.result.msg;
								}
                            });
                        }
                    }
                }, {
                    xtype: 'tbfill'
                }]
            });
        })
    });
</script>

2、formSubmit.php非常簡單，獲取ExtEditor.html傳過來的content，按照ExtJs要求的方式列印相應的Json就可以了。正常來說，還應該如《【php】使用重定向，偽裝表單處理頁面不存在》（點選開啟連結）中一樣，先判斷content是否為空，防止使用者直接通過輸入網址的方式，訪問這一頁。Aspx與Jsp的玩家請自便……在頁面獲取引數，列印個字串，是非常簡單的。

<?php
$content=$_REQUEST["content"];
echo "{
'success':true,
'msg':'{$content}'
}";
?>

【ExtJs】ExtJs的富文字編輯器

【js】kindeditor富文字編輯器的簡單使用

【Linux】中預設文字編輯器 vim 的入門與進階

【ExtJs】ExtJs的富文字編輯器

KindEditor富文字編輯器【圖片、視訊等功能的富文字編輯器】

【解決】獲取到ckeditor富文字編輯器body節點下的內容

【Vue】quill-editor富文字編輯器元件的運用與修改配置使圖片上傳到伺服器

【在MVC中應用百度富文字編輯器】

【vue】使用wangeditor富文字編輯器

【ASP.NET】6.百度富文字編輯器UEditor之從資料庫中取出來頁面展示

【php】ThinkPHP搭建百度Ueditor富文字編輯器

【ASP.NET】9.解決百度富文字編輯器UEditor往後臺傳資料寫入資料庫時，出現錯誤：檢測到有潛在危險的Request

我為什麼要做富文字編輯器【wangEditor5總結】

【實踐】簡潔大方的summernote 富文字編輯器外掛的用發——例項篇

【乾貨】富文字編輯器核心操作(contenteditable，window.getSelection()，FileReader與blob影象資源處理)

【Angular2】簡易版富文字編輯器

【外掛開發】觸屏裝置專用富文字編輯器實現

summernote富文字編輯器實現圖片新增上傳和刪除圖片

百度富文字編輯器ueditor的使用、非空校驗、引用預定義模板

vue富文字編輯器Tinymce，功能齊全，對圖片等媒體資源操控性好，非常推薦！

bbs專案富文字編輯器實現上傳檔案到media目錄

【ExtJs】ExtJs的富文字編輯器

相關推薦