vue结合ace实现一个代码编辑器效果代码-html代码-BFW代码库

vue结合ace实现一个代码编辑器效果代码

代码语言：html

所属分类：其他

代码描述：vue结合ace实现一个代码编辑器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=vue@2.6.1&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        "use strict";
        bready(function() {
            use(["ace/ace"], function() {

                //  Component
                var VueAceEditor = {
                    //  simplified model handling using `value` prop and `input` event for $emit
                    props: ['value', 'id', 'options'],
                    //  add dynmic class and id (if not set) based on component tag
                    template: "\n        <div :id=\"id ? id: $options._componentTag +'-'+ _uid\" \n             :class=\"$options._componentTag\">\n            <slot></slot>\n        </div>\n    ",
                    watch: {
                        value: function () {
                            //  two way binding – emit changes to parent
                            this.$emit('input', this.value);
                            //  update value on external model changes
                            if (this.oldValue !== this.value) {
                                this.editor.setValue(this.value, 1);
                            }
                        }
                    },

                    mounted: function () {
                        var _this = this;
                        //  editor
                        this.editor = window.ace.edit(this.$el.id);
                        //  deprecation fix
                .........完整代码请登录后点击上方下载按钮下载查看