是百度編輯器Ueditor第三方擴(kuò)展,本文會(huì)詳細(xì)講述如何利用Ueditor開(kāi)發(fā)Formdesign。
當(dāng)然你也可以使用Umeditor或其它編輯器。

基礎(chǔ)功能使用純 Javascript 編寫(xiě)，兼容：IE7++、Chrome、Firefox 等主流瀏覽器

表單設(shè)計(jì)器思路

安裝擴(kuò)展

請(qǐng)先下載擴(kuò)展，建議下載完整帶示例包，如果你下載獨(dú)立擴(kuò)展包，那你還需要另外下載Ueditor

下載擴(kuò)展

安裝

解壓后，這個(gè)目錄便是表單設(shè)計(jì)器擴(kuò)展的全部
獨(dú)立下載的用戶(hù)，同樣 copy 到 Ueditor 這個(gè)目錄即安裝完成。

./js--|ueditor----|Formdesign        把擴(kuò)展放到Ueditor下--------|bootstrap--------|leipi.Formdesign.v4.js--------|checkbox.html--------|...----|dialogs----|ueditor.all.js----|...

配置說(shuō)明

Formdesign Plugins 的配置目前只有一個(gè)，toolleipi:true它可以在編輯器的toolbars顯示表單設(shè)計(jì)器的圖標(biāo)

建議新建虛擬站點(diǎn)來(lái)驗(yàn)證，否則部分功能可能異常，正常訪問(wèn)地址如： http://localhost/Formdesign/index.html
如果你顯示的頁(yè)面和官方一樣并且沒(méi)有腳本報(bào)錯(cuò)，表示安裝成功。官方演示

index.html

<script id="myFormdesign" type="text/plain" style="widht:100%">    這里是Ueditor Formdesign 內(nèi)容</script><script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js"></script><script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js"></script><!--Fromdesign擴(kuò)展---><script type="text/javascript" charset="utf-8" src="js/ueditor/Formdesign/leipi.Formdesign.v4.js"></script>//實(shí)例一個(gè)Ueditorvar leipiEditor = UE.getEditor('myFormdesign',{        toolleipi:true,//是否在toolbars顯示，表單設(shè)計(jì)器的圖標(biāo)        //toolbars:[['FullScreen', 'Source']],//這里是工具攔       textarea: 'design_content',//編輯器的表單名稱(chēng)           //更多其他參數(shù)，請(qǐng)參考ueditor.config.js中的配置項(xiàng)});

開(kāi)發(fā)Ueditor表單擴(kuò)展

我們是完全參照Ueditor官方擴(kuò)展標(biāo)準(zhǔn)編寫(xiě)的擴(kuò)展，為了更好的兼容性，請(qǐng)大家也務(wù)必效仿。

添加擴(kuò)展

以最簡(jiǎn)單的checkbox控件來(lái)分析，這段代碼在 leipi.Formdesign.v4.js 中。
我們開(kāi)發(fā)新的擴(kuò)展時(shí)也可以復(fù)制這部分代碼作為基礎(chǔ)進(jìn)行修改，以此來(lái)提高效率。

UE.plugins['checkbox'] = function () {    var me = this,thePlugins = 'checkbox';    me.commands[thePlugins] = {        execCommand:function () {            var dialog = new UE.ui.Dialog({                //彈出模式以iframe方式打開(kāi)的控件配置頁(yè)面 URL                iframeUrl:this.options.UEDITOR_HOME_URL + UE.leipiFormdesignUrl+'/checkbox.html',                name:thePlugins,                editor:this,                title: '復(fù)選框',//彈出框標(biāo)題                cssRules:"width:600px;height:200px;",                buttons:[//彈出框按鈕集                {                    className:'edui-okbutton',                    label:'確定',                    onclick:function () {                        dialog.close(true);                    }                },                {                    className:'edui-cancelbutton',                    label:'取消',                    onclick:function () {                        dialog.close(false);                    }                }]            });            dialog.render();            dialog.open();        }    };    var popup = new baidu.editor.ui.Popup( {        editor:this,        content: '',        className: 'edui-bubble',        _edittext: function () {              baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;              me.execCommand(thePlugins);              this.hide();        },        _delete:function(){            if( window.confirm('確認(rèn)刪除該控件嗎？') ) {                baidu.editor.dom.domUtils.remove(this.anchorEl,false);            }            this.hide();        }    } );    popup.render();    //綁定鼠標(biāo)經(jīng)過(guò)控件    me.addListener( 'mouseover', function( t, evt ) {        evt = evt || window.event;        var el = evt.target || evt.srcElement;        var leipiPlugins = el.getAttribute('leipiplugins');        if ( /input/ig.test( el.tagName ) && leipiPlugins==thePlugins) {            var html = popup.formatHtml(                '<nobr>復(fù)選框: <span onclick=$$._edittext() class="edui-clickable">編輯</span>  <span onclick=$$._delete() class="edui-clickable">刪除</span></nobr>' );            if ( html ) {                popup.getDom( 'content' ).innerHTML = html;                popup.anchorEl = el;                popup.showAnchor( popup.anchorEl );            } else {                popup.hide();            }        }    });};

觸發(fā)擴(kuò)展

上面我們實(shí)例化了一個(gè)Ueditor為leipiEditor，觸發(fā)擴(kuò)展只需要調(diào)用Ueditor方法execCommand。

leipiEditor.execCommand('checkbox');//執(zhí)行擴(kuò)展 UE.plugins['checkbox'] 彈出iframe dialog。

定義擴(kuò)展屬性

checkbox.html 為例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>復(fù)選框</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >    <meta name="generator" content="www.leipi.org" />    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">    <!--[if lte IE 6]>    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">    <![endif]-->    <!--[if lte IE 7]>    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">    <![endif]-->    <link rel="stylesheet" href="leipi.style.css">    <script type="text/javascript" src="../dialogs/internal.js"></script>    <script type="text/javascript">function createElement(type, name){         var element = null;         try {                element = document.createElement('<'+type+' name="'+name+'">');         } catch (e) {}       if(element==null) {             element = document.createElement(type);             element.name = name;         }     return element;     }    </script></head><body><div class="content">    <table class="table table-bordered table-striped table-hover">     <tr>        <th><span>控件名稱(chēng)</span><span class="label label-important">*</span></th>        <th><span>選中狀態(tài)</span></th>    </tr>    <tr>        <td><input id="orgname" placeholder="必填項(xiàng)" type="text"/> </td>        <td>            <label class="radio"><input id="orgchecked0" checked="checked" name="checked" type="radio"> 不選中 </label>            <label class="radio"><input id="orgchecked1" name="checked" type="radio"> 選中 </label>        </td>    </tr>    </table></div><script type="text/javascript">var oNode = null,thePlugins = 'checkbox';window.onload = function() {    if( UE.plugins[thePlugins].editdom ){        oNode = UE.plugins[thePlugins].editdom;        var gTitle=oNode.getAttribute('title').replace(/"/g,"\"");        $G('orgname').value = gTitle;        var checked = oNode.getAttribute('checked');        checked ? $G('orgchecked1').checked = true : $G('orgchecked0').checked = true;    }}dialog.oncancel = function () {    if( UE.plugins[thePlugins].editdom ) {        delete UE.plugins[thePlugins].editdom;    }};dialog.onok = function (){    if( $G('orgname').value == '') {        alert('控件名稱(chēng)不能為空');        return false;    }    var gTitle=$G('orgname').value.replace(/\"/g,""");    if( !oNode ) {        try {            oNode = createElement('input','leipiNewField');            oNode.setAttribute('title',gTitle);            oNode.setAttribute('leipiPlugins',thePlugins );            oNode.setAttribute('type','checkbox');            if ($G('orgchecked1').checked) {                oNode.setAttribute('checked','checked');            } else {                oNode.checked = false;            }            editor.execCommand('insertHtml',oNode.outerHTML);            return true ;        } catch ( e ) {            try {                editor.execCommand('error');            } catch ( e ) {                alert('控件異常，請(qǐng)到 [雷劈網(wǎng)] 反饋或?qū)で髱椭?);            }            return false;        }    } else {        oNode.setAttribute('title',gTitle);        if ($G('orgchecked1').checked) {            oNode.setAttribute('checked','checked');        } else {            oNode.removeAttribute('checked');        }        delete UE.plugins[thePlugins].editdom;         return true;    }};</script></body></html>

Formdesign.class.php

核心編譯類(lèi)，以PHP為例，其它語(yǔ)言請(qǐng)效仿，主要以正則匹配數(shù)據(jù)

<?phpclass Formdesign{    /*    * 處理自定義設(shè)計(jì)表單模板    * $fields  總字段數(shù)    */    public function  parse_form($template,$fields=0)    {        //獲取標(biāo)簽          $preg =  "/<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>)/s";        //獲取屬性  修改為可變 的匹配        $preg_attr ="/(\w+)=\"(.?|.+?)\"/s";        preg_match_all($preg,$template,$temparr);        ....        ....                $parse_form = array(            'fields'=>$fields,//總字段數(shù)            'template'=>$template,//編譯后的html完整代碼            'parse'=>$template_parse,//替換后的html代碼            'data'=>$template_data,//提取出來(lái)的 字段信息            'add_fields'=>$add_fields,//本次需要添加的字段        );        return $parse_form;            }       /*    * 創(chuàng)建數(shù)據(jù)表， 通過(guò)fields自動(dòng)計(jì)算字段增長(zhǎng)    * 表中存取數(shù)據(jù)利用 foreign_id 進(jìn)行    */    public function parse_table($formid,$add_fields)    {        //1 分表創(chuàng)建        //2 添加字段        .....    }        /*    * 編譯字段    * $controller = array(    *   'user'=>array(    *           'uid'=>9527,    *           'real_name'=>'唐伯虎',    *       ),    *   'else'='其它要傳進(jìn)來(lái)的數(shù)據(jù)',    * );    */    public function unparse_form($form,$form_data=array(),$controller=array())    {        //把 $template_parse  和 $template_data 進(jìn)度數(shù)據(jù)處理，最終返回 完整HTML作顯示        ......           }        //抽出表單提交后 控件的值    public function unparse_data($form,$post_data,$controller=array())    {        //用戶(hù)填寫(xiě)完表單POST提交時(shí),把自定義的字段，提取出來(lái)，開(kāi)發(fā)者直接利用它來(lái)保存信息        .....    }    }?>

Javascript解析表單

文檔后期完善，請(qǐng)查看首頁(yè)源代碼示例

        /*        Javascript 解析表單        template 表單設(shè)計(jì)器里的Html內(nèi)容        fields 字段總數(shù)        */        parse_form:function(template,fields)

數(shù)據(jù)庫(kù)說(shuō)明

下載的每個(gè)示例中 db目錄下leipi_formdesign.sql文件是Mysql數(shù)據(jù)庫(kù)文件，其它數(shù)據(jù)庫(kù)請(qǐng)參考

        一、表 leipi_form 中以下字段都是 parse_form 中解析出來(lái)的        /*          *   content 建議只在編輯設(shè)計(jì)表單時(shí)用         *  content_parse + （自身業(yè)務(wù)） + content_data = content 用戶(hù)填寫(xiě)form          *         *  content_data 可以使用 Json 格式，官網(wǎng) php 中使用 serialize        */        `content` text NOT NULL COMMENT '表單原h(huán)tml模板未經(jīng)處理的',        `content_parse` text NOT NULL COMMENT '表單替換的模板 經(jīng)過(guò)處理',        `content_data` text NOT NULL COMMENT '表單中的字段數(shù)據(jù)',        `fields` smallint(5) unsigned NOT NULL DEFAULT '0' COMMENT '字段總數(shù)',        二、表 leipi_form_data_X 每個(gè)設(shè)計(jì)生成一張表，表字段根據(jù)表單控件添加，不用刪除字段，防止冗余可以后期統(tǒng)一清理                三、表 leipi_foreign_test 是一示例，這里 form_id 關(guān)聯(lián) leipi_form 的 id 以決定使用某張表單，用戶(hù)填寫(xiě)好的表單數(shù)據(jù)保留到 data_X ，用 id 關(guān)聯(lián) X

擴(kuò)展你的設(shè)計(jì)

先在前端添加相應(yīng)擴(kuò)展或選項(xiàng)
修改 Formdesign.class.php 來(lái)達(dá)到最終效果。

如：在宏控件中添加一個(gè)【當(dāng)前用戶(hù)部門(mén)】我們?cè)?code>macros.html加上<option value="sys_dept">當(dāng)前用戶(hù)部門(mén)，如華府</option>然后修改phppublic function macros_parse()

public function macros_parse($data,$def_value='',$controller=array()){    switch($data['leipidata'])    {    ......    //當(dāng)前部門(mén)    case 'sys_realname':        if(!$def_value)            $def_value = $controller['user']['dept'];        $tpl = str_replace('{macros}',$def_value,$tpl);        break;    .....    }    ....}

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看