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