首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >[javascript] vue项目cdn模式下使用wangEditor

[javascript] vue项目cdn模式下使用wangEditor

作者头像
唯一Chat
发布于 2022-02-23 16:44:46
发布于 2022-02-23 16:44:46
1.2K0
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

在GOFLY项目的实现过程中,需要使用富文本编辑器,现在使用下wangEditor

很简单,先引入

代码语言:javascript
复制
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

再使用

html中

代码语言:javascript
复制
<div id="welcomeEditor"></div>

在methods方法中加入

代码语言:javascript
复制
            initEditor(){
                if(this.editor!=null){
                    return;
                }
                const E = window.wangEditor
                this.editor = new E('#welcomeEditor')
                this.editor.config.height = 240;
                this.editor.config.menus = [
                    'head',
                    'bold',
                    'fontSize',
                    'fontName',
                    'italic',
                    'underline',
                    'strikeThrough',
                    'indent',
                    'lineHeight',
                    'foreColor',
                    'backColor',
                    'link',
                    'justify',
                    'emoticon',
                    'table',
                    'splitLine',
                    'undo',
                    'redo',
                ]
                this.editor.create();
            }
        },

获取html内容

代码语言:javascript
复制
this.editor.txt.html();
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-01-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档