vue调用ace富文本编辑器

最新推荐文章于 2024-08-06 15:16:55 发布

像风一样自由自由

最新推荐文章于 2024-08-06 15:16:55 发布

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： ace

本文链接：https://blog.csdn.net/qq_38834863/article/details/85235264

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.切换语言

<div class="code-type">
    <label class="radio-inline">
       <input type="radio" value="sh" name="codeType" v-model="scriptType">shell
    </label>
    <label class="radio-inline">
    	<input type="radio" value="batchfile" name="codeType" v-model="scriptType">bat
    </label>
    <label class="radio-inline">
    	<input type="radio" value="perl" name="codeType" v-model="scriptType">perl
    </label>
     <label class="radio-inline">
     	<input type="radio" value="python" name="codeType" v-model="scriptType">python
     </label>
     <label class="radio-inline">
     	<input type="radio" value="powershell" name="codeType" v-model="scriptType">powershell
     </label>
 </div>

2.文本编辑器页面元素

<div v-if="editor_show" class="editor_box">
     <pre id="code" class="ace_editor" style="min-height:400px;width:80%"><textarea class="ace_text-input"></textarea></pre>
 </div>

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('<pre id="code" class="ace_editor" style="min-height:400px;width:80%"><textarea class="ace_text-input"></textarea></pre>');
                this.changeType(val)
            }
            }