[javascript] vue项目cdn模式下使用wangEditor([JavaScript] Vue project using wangeditor in CDN mode)

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

很简单,先引入

<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

再使用

html中

<div id="welcomeEditor"></div>

在methods方法中加入

            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内容

this.editor.txt.html();
————————

During the implementation of Gofly project, you need to use rich text editor. Now use wangeditor

Very simple, first introduce

<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

Reuse

html中

<div id="welcomeEditor"></div>

Add in the methods method

            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();
            }
        },

Get HTML content

this.editor.txt.html();