下载代码:http://ueditor.baidu.com/website/download.html
在HTML文件的head引入以下文件:
- <!-- 编辑器依赖 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'">
- <!-- 编辑器依赖 end -->
注意:引入路径根据文件的实际存放路径来写就好
接下来在组件里就可以用了,组件完整代码:
- <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文件中配置。
联系客服