toast ui.vue editor

ข้อสังเกต: ที่เก็บนี้เลิกใช้แล้ว

Toast UI Editor Vue Wrapper ได้รับการจัดการแยกต่างหากจากที่เก็บโปรแกรมแก้ไข Toast UI อันเป็นผลมาจากการกระจายของปัญหาเหล่านี้เราตัดสินใจที่จะเลิกใช้ที่เก็บเสื้อคลุมแต่ละอันและจัดการพื้นที่เก็บข้อมูลเป็นโมโนรีเปาจากที่เก็บเครื่องมือแก้ไข Toast UI

จากนี้ไปโปรดส่งปัญหาหรือการสนับสนุนที่เกี่ยวข้องกับ Toast UI React Wrapper ไปยัง Toast UI Editor Editor Repository ขอบคุณ?.

Toast UI Editor สำหรับ Vue

นี่คือ Vue Component Wrapping Toast UI Editor

สารบัญ

• รวบรวมสถิติเกี่ยวกับการใช้โอเพ่นซอร์ส
• ติดตั้ง
  • ใช้ NPM
• การใช้งานบรรณาธิการ
  • โหลด
  • ดำเนินการ
  • ใช้ V-model
  • อุปกรณ์ประกอบฉาก
  • เหตุการณ์
  • วิธี
• การใช้ผู้ชม
  • โหลด
  • ดำเนินการ
  • อุปกรณ์ประกอบฉาก
  • เหตุการณ์
• ดึงขั้นตอนการร้องขอ
• เอกสาร
• การบริจาค
• ใบอนุญาต

รวบรวมสถิติเกี่ยวกับการใช้โอเพ่นซอร์ส

Vue Wrapper of Toast UI Editor ใช้ Google Analytics (GA) เพื่อรวบรวมสถิติเกี่ยวกับการใช้โอเพ่นซอร์สเพื่อระบุวิธีการใช้ตัวแก้ไข UI Toast UI อย่างกว้างขวางทั่วโลก นอกจากนี้ยังทำหน้าที่เป็นดัชนีที่สำคัญในการกำหนดหลักสูตรในอนาคตของโครงการ location.hostname (เช่น>“ ui.toast.com”) จะถูกรวบรวมและวัตถุประสงค์เพียงอย่างเดียวคืออะไรนอกจากการวัดสถิติเกี่ยวกับการใช้งาน ในการปิดใช้งาน GA ให้ใช้ตัวเลือก usageStatistics ต่อไปนี้เมื่อประกาศ Vue Wrapper Compoent

 var options = {
    ...
    usageStatistics : false
}

หรือรวมถึง tui-code-snippet.js ( v1.4.0 หรือ ใหม่กว่า ) จากนั้นเขียนตัวเลือกทันทีดังนี้:

 tui . usageStatistics = false ; 

- ติดตั้ง

ใช้ NPM

npm install --save @toast-ui/vue-editor

การใช้งานบรรณาธิการ

โหลด

คุณสามารถใช้โปรแกรมแก้ไข Toast UI สำหรับ Vue เป็นรูปแบบ moudule หรือเนมสเปซ นอกจากนี้คุณสามารถใช้องค์ประกอบไฟล์เดียว (SFC ของ Vue) เมื่อใช้รูปแบบโมดูลและ SFC คุณควรโหลด tui-editor.css , tui-editor-contents.css และ codemirror.css ในสคริปต์

• การใช้โมดูล ecmascript

   import 'tui-editor/dist/tui-editor.css' ;
  import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'codemirror/lib/codemirror.css' ;
  import { Editor } from '@toast-ui/vue-editor'

• ใช้โมดูล CommonJS

   require ( 'tui-editor/dist/tui-editor.css' ) ;
  require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
  require ( 'codemirror/lib/codemirror.css' ) ;
  var toastui = require ( '@toast-ui/vue-editor' ) ;
  var Editor = toastui . Editor ;

• ใช้องค์ประกอบไฟล์เดียว

   import 'tui-editor/dist/tui-editor.css' ;
  import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'codemirror/lib/codemirror.css' ;
  import Editor from '@toast-ui/vue-editor/src/Editor.vue'

• ใช้เนมสเปซ

   var Editor = toastui . Editor ;

ดำเนินการ

ใช้งานครั้งแรก <editor/> ในเทมเพลต

 < template >
    < editor />
</ template >

จากนั้นเพิ่ม Editor ลงใน components ในส่วนประกอบหรืออินสแตนซ์ Vue ของคุณเช่นนี้:

 import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  }
}

หรือ

 import { Editor } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'editor' : Editor
    }
} ) ;

ใช้ V-model

หากคุณใช้ V-Model คุณต้องประกาศ data สำหรับการเชื่อมโยง (❗เมื่อใช้ตัวแก้ไขในโหมด wysiwyg v-model สามารถทำให้ประสิทธิภาพการทำงานลดลง)

ในตัวอย่างด้านล่าง editorText มีผลผูกพันกับข้อความของตัวแก้ไข

 < template >
    < editor v-model =" editorText " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  } ,
  data ( ) {
      return {
          editorText : ''
      }
  }
}
</ script >

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ค่า	สาย	-	เสานี้สามารถเปลี่ยนเนื้อหาของตัวแก้ไขได้ หากคุณใช้ v-model อย่าใช้มัน
ตัวเลือก	วัตถุ	ต่อไปนี้ defaultOptions	ตัวเลือกของ tui.editor นี่คือการเริ่มต้น tui.editor
ความสูง	สาย	'300px'	เสานี้สามารถควบคุมความสูงของตัวแก้ไขได้
PreviewStyle	สาย	'แท็บ'	เสานี้สามารถเปลี่ยนรูปแบบตัวอย่างของตัวแก้ไข ( tab หรือ vertical )
โหมด	สาย	'Markdown'	เสานี้สามารถเปลี่ยนโหมดของตัวแก้ไข ( markdown หรือ wysiwyg )
HTML	สาย	-	หากคุณต้องการเปลี่ยนเนื้อหาของตัวแก้ไขโดยใช้รูปแบบ HTML ให้ใช้เสานี้
มองเห็นได้	บูลีน	จริง	เสานี้สามารถควบคุมการมองเห็นของ Eiditor

 const defaultOptions = {
    minHeight : '200px' ,
    language : 'en_US' ,
    useCommandShortcut : true ,
    useDefaultHTMLSanitizer : true ,
    usageStatistics : true ,
    hideModeSwitch : false ,
    toolbarItems : [
        'heading' ,
        'bold' ,
        'italic' ,
        'strike' ,
        'divider' ,
        'hr' ,
        'quote' ,
        'divider' ,
        'ul' ,
        'ol' ,
        'task' ,
        'indent' ,
        'outdent' ,
        'divider' ,
        'table' ,
        'image' ,
        'link' ,
        'divider' ,
        'code' ,
        'codeblock'
    ]
} ;

ตัวอย่าง :

 < template >
    < editor
    :value =" editorText "
    :options =" editorOptions "
    :html =" editorHtml "
    :visible =" editorVisible "
    previewStyle =" vertical "
    height =" 500px "
    mode =" wysiwyg "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    data ( ) {
        return {
            editorText : 'This is initialValue.' ,
            editorOptions : {
                hideModeSwitch : true
            } ,
            editorHtml : '' ,
            editorVisible : true
        } ;
    } ,
} ;
</ script >

เหตุการณ์

• โหลด: มันจะถูกปล่อยออกมาเมื่อตัวแก้ไขโหลดเต็มที่
• การเปลี่ยนแปลง: มันจะถูกปล่อยออกมาเมื่อมีการเปลี่ยนแปลงเนื้อหา
• Statechange: มันจะถูกปล่อยออกมาเมื่อรูปแบบเปลี่ยนตามตำแหน่งเคอร์เซอร์
• โฟกัส: มันจะถูกปล่อยออกมาเมื่อบรรณาธิการได้รับโฟกัส
• เบลอ: มันจะถูกปล่อยออกมาเมื่อบรรณาธิการหลวมโฟกัส

ตัวอย่าง :

 < template >
    < editor
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        onEditorLoad ( ) {
            // implement your code
        } ,
        onEditorFocus ( ) {
            // implement your code
        } ,
        onEditorBlur ( ) {
            // implement your code
        } ,
        onEditorChange ( ) {
            // implement your code
        } ,
        onEditorStateChange ( ) {
            // implement your code
        } ,
    }
} ;
</ script >

วิธี

หากคุณต้องการจัดการกับตัวแก้ไขมากขึ้นคุณสามารถใช้วิธี invoke เพื่อเรียกใช้วิธีการของ TUI.Editor สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการดูวิธีการของ TUI.Editor

ก่อนอื่นคุณต้องกำหนดแอตทริบิวต์ ref ของ <editor/> จากนั้นคุณสามารถใช้วิธีการของ invoke ผ่าน this.$refs เช่นนี้:

 < template >
    < editor ref =" tuiEditor " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        scroll ( ) {
            this . $refs . tuiEditor . invoke ( 'scrollTop' , 10 ) ;
        } ,
        moveTop ( ) {
            this . $refs . tuiEditor . invoke ( 'moveCursorToStart' ) ;
        } ,
        getHtml ( ) {
            let html = this . $refs . tuiEditor . invoke ( 'getHtml' ) ;
        }
    }
} ;
</ script > 

- การใช้ผู้ชม

โหลด

• การใช้โมดูล ecmascript

   import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'highlight.js/styles/github.css' ;
  import { Viewer } from '@toast-ui/vue-editor'

• ใช้โมดูล CommonJS

   require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
  require ( 'highlight.js/styles/github.css' ) ; 
  var toastui = require ( '@toast-ui/vue-editor' ) ;
  var Viewer = toastui . Viewer ;

• ใช้องค์ประกอบไฟล์เดียว

   import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'highlight.js/styles/github.css' ;
  import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'

• ใช้เนมสเปซ

   var Viewer = toastui . Viewer ;

ดำเนินการ

ใช้งานครั้งแรก <viewer/> ในเทมเพลต

 < template >
    < viewer />
</ template >

จากนั้นเพิ่ม Viewer ใน components ในส่วนประกอบหรืออินสแตนซ์ Vue ของคุณเช่นนี้:

 import { Viewer } from '@toast-ui/vue-editor'

export default {
  components : {
    'viewer' : Viewer
  }
}

หรือ

 import { Viewer } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'viewer' : Viewer
    }
} ) ;

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ค่า	สาย	-	เสานี้สามารถเปลี่ยนเนื้อหาของผู้ชมได้
ความสูง	สาย	'300px'	เสานี้สามารถควบคุมความสูงของผู้ชมได้
ความยาว	อาร์เรย์		เสานี้สามารถใช้ส่วนขยายของผู้ชม

ตัวอย่าง :

 < template >
    < viewer
    :value =" viewerText "
    height =" 500px "
    />
</ template >
< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components : {
        'viewer' : Viewer
    } ,
    data ( ) {
        return {
            viewerText : '# This is Viewer.n Hello World.' ,
        } ;
    } ,
} ;
</ script >

เหตุการณ์

• โหลด: มันจะถูกปล่อยออกมาเมื่อตัวแก้ไขโหลดเต็มที่
• การเปลี่ยนแปลง: มันจะถูกปล่อยออกมาเมื่อมีการเปลี่ยนแปลงเนื้อหา
• Statechange: มันจะถูกปล่อยออกมาเมื่อรูปแบบเปลี่ยนตามตำแหน่งเคอร์เซอร์
• โฟกัส: มันจะถูกปล่อยออกมาเมื่อบรรณาธิการได้รับโฟกัส
• เบลอ: มันจะถูกปล่อยออกมาเมื่อบรรณาธิการหลวมโฟกัส

ตัวอย่าง :

 < template >
    < viewer
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >

< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

- ดึงขั้นตอนการร้องขอ

ผลิตภัณฑ์ Toast UI เป็นโอเพ่นซอร์สดังนั้นคุณสามารถสร้างคำขอดึง (PR) หลังจากที่คุณแก้ไขปัญหา เรียกใช้สคริปต์ NPM และพัฒนาตัวเองด้วยกระบวนการต่อไปนี้

การตั้งค่า

ส้อม develop สาขาเป็นที่เก็บส่วนตัวของคุณ โคลนกับคอมพิวเตอร์ท้องถิ่น ติดตั้งโมดูลโหนด ก่อนเริ่มการพัฒนาคุณควรตรวจสอบข้อผิดพลาดที่ไม่เคยเกิดขึ้นมาก่อน

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

พัฒนา

เริ่มพัฒนากันเถอะ!

ดึงคำขอ

ก่อนการประชาสัมพันธ์ให้ตรวจสอบเพื่อทดสอบสุดท้ายแล้วตรวจสอบข้อผิดพลาดใด ๆ หากไม่มีข้อผิดพลาดให้จงผลักดันมัน!

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนของ PR โปรดดูลิงก์ของส่วนที่มีส่วนร่วม

การบริจาค

• จรรยาบรรณ
• แนวทางที่มีส่วนร่วม
• ประชุมอนุสัญญา

ใบอนุญาต

ซอฟต์แวร์นี้ได้รับอนุญาตภายใต้ MIT © NHN