vue调用ace富文本编辑器

1.切换语言

    
       shell
    
    
    	bat
    
    
    	perl
    
     
     	python
     
     
     	powershell
     
 

2.文本编辑器页面元素

3.vue中使用

data:{
scriptType: 'sh',
},
methods:{
changeType(lang) {
                //初始化对象
                this.editor = ace.edit("code");

                //设置风格和语言（更多风格和语言，请到github上相应目录查看）
                theme = "clouds"
                language = lang
                this.editor.setTheme("ace/theme/monokai");
                this.editor.session.setMode("ace/mode/" + language);

                //字体大小
                this.editor.setFontSize(18);

                //设置只读（true时只读，用于展示代码）
                this.editor.setReadOnly(false);

                //自动换行,设置为off关闭
                this.editor.setOption("wrap", "free")

                //启用提示菜单
                ace.require("ace/ext/language_tools");
                this.editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                });
            }
            }
            
         

watch: {
            scriptType(val) {
                this.editor_show = true;
                if (this.editor) {
                    this.editor.destroy();
                    this.editor.container.remove();
                }
                $(".editor_box").append('
');
                this.changeType(val)
            }
            }