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
                        this.editor.$blockScrolling = Infinity;
                        //  ignore doctype warnings
                        var session = this.editor.getSession();
                        session.on("changeAnnotation", function () {
                            var a = session.getAnnotations();
                            var b = a.slice(0).filter(function (item) {
                                return item.text.indexOf('DOC') == -1;
                            });
                            if (a.length > b.length)
                                session.setAnnotations(b);
                        });
                        //  editor options
                        //  https://github.com/ajaxorg/ace/wiki/Configuring-Ace
                        this.options = this.options || {};
                        //  opinionated option defaults
                        this.options.maxLines = this.options.maxLines || Infinity;
                        this.options.printMargin = this.options.printMargin || false;
                        this.options.highlightActiveLine = this.options.highlightActiveLine || false;
                        //  hide cursor
                        if (this.options.cursor === 'none' || this.options.cursor === false) {
                            this.editor.renderer.$cursorLayer.element.style.display = 'none';
                            delete this.options.cursor;
                        }
                        //  add missing mode and theme paths
                        if (this.options.mode && this.options.mode.indexOf('ace/mode/') === -1) {
                            this.options.mode = "ace/mode/" + this.options.mode;
                        }
                        if (this.options.theme && thi.........完整代码请登录后点击上方下载按钮下载查看