toast ui.vue editor下載 - toast ui.vue editor源代碼下載

配x注意：此存儲庫被棄用

Toast UI編輯器VUE包裝器已與Toast UI編輯器存儲庫分開管理。由於這些問題的分佈，我們決定棄用每個包裝器存儲庫，並將存儲庫作為Toast UI編輯器存儲庫中的單聲道管理。

從現在開始，請向Toast UI編輯器存儲庫提交與Toast UI React包裝器相關的問題或貢獻。謝謝你？。

Vue的Toast UI編輯器

這是VUE組件包裝Toast UI編輯器。

收集有關使用開源的統計數據

Toast UI編輯器的Vue包裝器應用Google Analytics（GA）來收集有關使用開源的統計信息，以確定敬酒UI編輯器在全球範圍內如何使用。它也是確定未來項目過程的重要索引。 location.hostname（例如>“ ui.toast.com”）將被收集，唯一目的無非是衡量使用情況的統計信息。要禁用GA，請在聲明Vue包裝器組合時使用以下usageStatistics選項。

 var options = {
    ...
    usageStatistics : false
}

或者，包括tui-code-snippet.js （ v1.4.0或更高版本），然後立即編寫選項：

 tui . usageStatistics = false ;

？安裝

使用NPM

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

編輯器的用法

載入

您可以將Toast UI編輯器作為Moudule格式或名稱空間進行VUE。另外，您可以使用單個文件組件（VUE的SFC）。使用模塊格式和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'

使用concomjs模塊

 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添加到組件或VUE實例中的components中：

 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模型

如果使用V模型，則必須聲明一個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'	該道具可以控制編輯器的高度。
預覽風格	細繩	'tab'	此道具可以更改編輯器的預覽樣式。（ `tab`或`vertical` ）
模式	細繩	“降價”	此道具可以更改編輯器的模式。（ `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的方法。

首先，您需要分配<editor/>的ref屬性，然後可以通過此方法使用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'

使用concomjs模塊

 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添加到組件或VUE實例中的components中：

 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之前，檢查最後測試，然後檢查任何錯誤。如果沒有錯誤，請提交然後推！

有關PR步驟的更多信息，請參閱貢獻部分的鏈接。

貢獻

行為守則
貢獻指南
提交約定

執照

展開

toast ui.vue editor

配x注意：此存儲庫被棄用

Vue的Toast UI編輯器

目錄

收集有關使用開源的統計數據

？安裝

使用NPM

編輯器的用法

載入

實施

使用V模型

道具

事件

方法

？觀眾用法

載入

實施

道具

事件

？拉請求步驟

設定

發展

拉請求

貢獻

執照

Seelen UI

FC 24 Live Editor

editor app

ps ui

editor

Aloha Editor html5编辑器

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML線上編輯器

阿賽線上HTML編輯器

Google Dorks

shepherd

mongo express