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 && this.options.theme.indexOf('ace/theme/') === -1) {
                            this.options.theme = "ace/theme/" + this.options.theme;
                        }
                        this.editor.setOptions(this.options);
                        //  set model value
                        //  if no model value found – use slot content
                        if (!this.value || this.value === '') {
                            this.$emit('input', this.editor.getValue());
                        } else
                        {
                            this.editor.setValue(this.value, -1);
                        }
                        //  editor value changes
                        this.editor.on('change', function () {
                            //  oldValue set to prevent internal updates
                            _this.value = _this.oldValue = _this.editor.getValue();
                        });
                    },
                    methods: {
                        editor: function () {
                            return this.editor;
                        }
                    }
                };

                //  Application
                new Vue({
                    el: '#app',
                    components: {
                        'vue-ace-editor': VueAceEditor
                    },

                    data: {
                        textareacontent: null,
                        exsamplecontent: "<article style=\"text-align: center\">\n    <img src=\"https://ace.c9.io/doc/site/images/ace-logo.png\">\n    <h1>Lorem Ipsum</h1>\n    <p>Dolor sit amet</p>\n    <hr/>\n</article>",
                        exsampleoptions: {
.........完整代码请登录后点击上方下载按钮下载查看