หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

รูปแบบองุ่น

ปลั๊กอินนี้เพิ่มส่วนประกอบและบล็อกแบบฟอร์มพื้นฐานบางส่วนซึ่งช่วยในการทำงานกับฟอร์มได้ง่ายขึ้น

การสาธิต

ส่วนประกอบที่มีอยู่: form input textarea select option checkbox label button radio เลือก

ตัวเลือก

ตัวเลือก คำอธิบาย ค่าเริ่มต้น
blocks บล็อกใดที่จะเพิ่ม ['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'] (ทั้งหมด)
category ชื่อหมวดหมู่ Forms
block เพิ่มตัวเลือกบล็อกที่กำหนดเองตาม ID บล็อก (blockId) => ({})

การดาวน์โหลด

  • CDN
    • https://unpkg.com/grapesjs-plugin-forms
  • NPM
    • npm i grapesjs-plugin-forms
  • กระตวน
    • git clone https://github.com/GrapesJS/components-forms.git

การใช้งาน

โดยตรงในเบราว์เซอร์ 

 < link href =" path/to/grapes.min.css " rel =" stylesheet " />
< script src =" path/to/grapes.min.js " > </ script >
< script src =" path/to/grapesjs-plugin-forms.min.js " > </ script >

< div id =" gjs " > </ div >

< script type =" text/javascript " >
  var editor = grapesjs . init ( {
      fromElement : 1 ,
      container : '#gjs' ,
      plugins : [ 'grapesjs-plugin-forms' ] ,
      pluginsOpts : {
        'grapesjs-plugin-forms' : { /* ...options */ }
      }
  } ) ;
</ script >

จาวาสคริปต์สมัยใหม่ 

 import grapesjs from 'grapesjs' ;
import gjsForms from 'grapesjs-plugin-forms' ;

const editor = grapesjs . init ( {
  container : '#gjs' ,
  // ...
  plugins : [ gjsForms ] ,
  pluginsOpts : {
    [ gjsForms ] : { /* options */ }
  }
  // or
  plugins : [
    editor => gjsForms ( editor , { /* options */ } ) ,
  ] ,
} ) ;

i18n

หากคุณต้องการเปลี่ยนป้ายกำกับส่วนประกอบ/ลักษณะบางอย่างคุณสามารถพึ่งพาโมดูล I18N ได้นี่เป็นตัวอย่างที่สมบูรณ์สำหรับภาษา en เริ่มต้น 

 editor . I18n . addMessages ( {
  en : {
    blockManager : {
      labels : {
        form : 'EN Form' ,
        input : 'EN Input' ,
        textarea : 'EN Textarea' ,
        select : 'EN Select' ,
        checkbox : 'EN Checkbox' ,
        radio : 'EN Radio' ,
        button : 'EN Button' ,
        label : 'EN Label' ,
      } ,
      categories : {
        forms : 'EN Forms' ,
      }
    } ,
    domComponents : {
      names : {
        form : 'EN Form' ,
        input : 'EN Input' ,
        textarea : 'EN Textarea' ,
        select : 'EN Select' ,
        checkbox : 'EN Checkbox' ,
        radio : 'EN Radio' ,
        button : 'EN Button' ,
        label : 'EN Label' ,
      } ,
    } ,
    traitManager : {
      traits : {
        labels : {
          method : 'EN Method' ,
          action : 'EN Action' ,
          name : 'EN Name' ,
          placeholder : 'EN Placeholder' ,
          type : 'EN Type' ,
          required : 'EN Required' ,
          options : 'EN Options' ,
          id : 'EN Id' ,
          for : 'EN For' ,
          value : 'EN Value' ,
          checked : 'EN Checked' ,
          text : 'EN Text' ,
        } ,
        options : {
          type : {
            text : 'EN Text' ,
            email : 'EN Email' ,
            password : 'EN Password' ,
            number : 'EN Number' ,
            submit : 'EN Submit' ,
            reset : 'EN Reset' ,
            button : 'EN Button' ,
          }
        }
      } ,
    } ,
  }
} ) ;

การพัฒนา

โคลนที่เก็บ 

$ git clone https://github.com/GrapesJS/components-forms.git
$ cd grapesjs-plugin-forms

ติดตั้ง 

$ npm i

เริ่มเซิร์ฟเวอร์ dev 

$ npm start

ใบอนุญาต

BSD 3 ข้อ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด