下載代碼:http://ueditor.baidu.com/website/download.html
在HTML文件的head引入以下文件:
- <!-- 編輯器依賴(lài) begin -->
- <script src="./ueditor/ueditor.config.js"></script>
- <script src="./ueditor/ueditor.all.min.js"></script>
- <script src="./ueditor/lang/zh-cn/zh-cn.js"></script>
- <link rel="stylesheet" href="./ueditor/themes/default/css/ueditor.css'">
- <!-- 編輯器依賴(lài) end -->
注意:引入路徑根據文件的實(shí)際存放路徑來(lái)寫(xiě)就好
接下來(lái)在組件里就可以用了,組件完整代碼:
- <template>
- <div>
- <div id="container" style="width:50vw; height:300px;"></div>
- </div>
- </template>
- <script>
- export default {
- name: 'index',
- data() {
- return {
- editor: null,
- value: ''
- }
- },
- mounted() {
- this.editor = window.UE.getEditor('container')
- this.editor.addListener('ready', () => {
- this.editor.setContent(this.value)
- })
- }
- }
- </script>
- <style>
- </style>
這樣就可以了,菜單可以根據需要,自己在ueditor.config.js文件中配置。
聯(lián)系客服