精华内容
下载资源
问答
  • JS富文本编辑器插件NicEdit是一款轻量级插件,跨平台的Inline Content Editor。
  • 富文本编辑器插件summernote.js是一款基于jQuery+Bootstarp实现的网页文本编辑器特效。
  • 将压缩包解压后,将features文件夹和plugins文件夹的内容,复制到eclipse安装目录的对应文件夹,你的eclipse就有了JS的提示词功能了!
  • js编辑器插件

    千次阅读 2018-06-13 11:23:48
    使用js实现一款简单的编辑器插件,可以实现文字的编辑,图片的上传操作。 /** * 自定义编辑器 * @param {Object} id 编辑区 * @param {Object} control 操作区 */ function insertImg(id, control, dataparams,...

    使用js实现一款简单的编辑器插件,可以实现文字的编辑,图片的上传操作。

    /**
     * 自定义编辑器
     * @param {Object} id      编辑区
     * @param {Object} control 操作区
     */
    function insertImg(id, control, dataparams, fun){
        this.bigBox  = document.getElementById(id),
        this.handles = document.getElementById(control),
        this.handle  = this.handles.children[0],
        this.handleChildt  = this.handle.children[1],
        this.gethtml = this.handles.children[1],
        param = dataparams,
        funs = fun,
        this.init()
    }
    insertImg.prototype = {
        init:function(){
    
            this.edit();      //编辑操作
            this.getResult(); //编辑操作
    
        },
        pasteHandler:function() {
            var that = this;
            /**
             * 监控粘贴(ctrl+v),粘贴过来的替换多余的html代码,只保留<br>
             */
            setTimeout(function() {
    
                var content = that.innerHTML;
                valiHTML = ["br"];
                content = content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, "&nbsp;&nbsp;").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
    
                if(!$.browser.mozilla) {
    
                    content = content.replace(/\r?\n/gi, "<br>");
    
                }
    
                that.innerHTML = content;
            }, 1)
        },
        _insertimg:function(str) {
            /*
             * 锁定编辑器中鼠标光标位置。
             */
            var selection = window.getSelection ? window.getSelection() : document.selection;
    
            var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
    
            if(!window.getSelection) {
    
                this.bigBox.focus();
    
                var selection = window.getSelection ? window.getSelection() : document.selection;
    
                var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
    
                range.pasteHTML(str);
    
                range.collapse(false);
    
                range.select();
    
            } else {
    
                this.bigBox.focus();
    
                range.collapse(false);
    
                var hasR = range.createContextualFragment(str);
    
                var hasR_lastChild = hasR.lastChild;
    
                while(hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
    
                    var e = hasR_lastChild;
    
                    hasR_lastChild = hasR_lastChild.previousSibling;
    
                    hasR.removeChild(e)
    
                }
    
                range.insertNode(hasR);
    
                if(hasR_lastChild) {
    
                    range.setEndAfter(hasR_lastChild);
    
                    range.setStartAfter(hasR_lastChild)
    
                }
    
                selection.removeAllRanges();
    
                selection.addRange(range)
    
            }
    
        },
        enterkey:function() {
            /*
             * 监控按enter键和空格键,如果按了enter键,则取消原事件,用<BR/ >代替。
             */
            e = event.keyCode;
    
            if(e == 13 || e == 32) {
    
                var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    
                event.returnValue = false; // 取消此事件的默认操作 
    
                if(document.selection && document.selection.createRange) {
    
                    var myRange = document.selection.createRange();
    
                    myRange.pasteHTML('<br />');
    
                } else if(window.getSelection) {
    
                    var selection = window.getSelection();
    
                    var range = window.getSelection().getRangeAt(0);
    
                    range.deleteContents();
    
                    var newP = document.createElement('br');
    
                    range.insertNode(newP);
    
                }
    
            }
        },
        edit:function() {
            var that = this;
            //复制粘贴以及回车换行操作
            this.bigBox.onkeydown = this.enterkey;
            this.bigBox.onpaste = this.pasteHandler;
    
            //上传图片
            this.handleChildt.onchange = function() {
                that.upLoadIMg();
            }
        },
        getResult:function() {
            //获取需要的结果
            var that = this;
            this.gethtml.onclick = function() {
                $(that.bigBox).find('br').remove(); //去除br  
                var html = that.bigBox.innerHTML;
                //正则修改img为自己想要的格式
                var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;
                //需要提交的内容
                param.content = html.replace(reg, '##@$2@##').replace(/\s/g, "");
                param.title = $.trim($('.titles').val())
                param.topicid = $('#topicid option:selected').val()
                $.post(param.saveData,param,function(data){
                    var data = JSON.parse(data)
                    if(data.code == '10000'){
                        //确认完回调
                        if(funs){
                            funs();
                        }
                    }
                })
            }
    
        },
        upLoadIMg:function() {
            //插入图片
            var that = this;
            if(that.handleChildt.files[0] != undefined){
                //构造form表单上传  
                var as = new FormData();  
                as.append("uploadfile",that.handleChildt.files[0]); //参数uploadfile
                $.ajax({  
                    url:param.upImgSrc,  
                    xhrFields:{  
                        withCredentials:true  
                    },
                    type: "POST",  
                    cache: false,  
                    data: as,  
                    processData: false,  
                    contentType:false,
                    success: function (result) {
                        alert(1)
                        var data = JSON.parse(result);
                        if(data.code == '10000'){  
                            that.bigBox.focus();
                            var img_url = '<img src="https://p5.gexing.com/'+data.data.url+'" dataUrl="'+data.data.url+'">';
                            that._insertimg(img_url);
                        }else{  
                            alert('上传失败!')  
                        }  
                    }  
                })  
            }
        }
    }
    
    /**
             * [insertImgs 初始化编辑器]
             * @type {Object} editCont  编辑器
             * @type {Object} handle   操作控制按钮
             * @type {Object} params   参数
             * @type {Object} function  成功后的回调函数
             */
            var insertImgs = new insertImg('editCont','handle',params,function(){
                //保存成功后的事件
    
            });
    <div id="editCont" contenteditable="true" class="editbox" style="width: 400px;height: 700px;border: 1px solid #ccc;padding:10px;float: left;overflow: auto;">
    </div>
    <div style="padding: 20px 16px;text-align:center;" id="handle">
                <form action="" id="add_file_form" class="loadImgBox" method="post" enctype="multipart/form-data">
                    <span>上传图片</span>
                    <input id="uploaderInput" class="weui-uploader__input" name="uploadfile" type="file" accept="image/jpeg,image/jpg,image/png" multiple="">  
                </form>
                <input class="btn j_btn" style="margin-left:50px;" type="button" name="submit" value="保存">
            </div>
    展开全文
  • 是一个js代码编辑器插件,可以设置样式,主题,可显示行号
  • quill.js是一款强大的现代富文本编辑器插件。该富文本编辑器插件支持所有的现代浏览器、平板电脑和手机。它提供了文本编辑器的所有功能,并为开发者提供大量的配置参数和方法。
  • 说明: 官方正式版虽然内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配;  但是针对于某些语言来说,还是有些...Javascript code intelligence for atom with tern.js. Uses sugge

    说明:

    官方正式版虽然内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 
    但是针对于某些语言来说,还是有些不足的….其中JS的补全上就明显不足了…所以需要借助插件来拓展

    atom-ternjs

    官方描述: 
    Javascript code intelligence for atom with tern.js. Uses suggestion provider by autocomplete-plus.

    简言之,就是JS代码智能提示,个人也希望以后可以直接内置到atom中,而不是作为第三方插件!!

    此插件依赖两个东东,git 和nodejs ; 具体可以参考我博客里面的其他博文

    作用范围:

    1. Configure your project(针对项目进行配置– 英文言简意赅就不翻译了)

      • Navigate to packages -> Atom Ternjs -> Configure project
      • The config view appears.
      • Hit “Save & Restart Server” to create/update the .tern-project file
    2. 全局(这个就不用解释了)

    智能提示支持的语言特性:

    • browser: completion for vanilla js (optional)
    • ecma5: es5 (optional)
    • ecma6: es6 (optional)
    • jquery: completion for jQuery (optional) – 这个可以有,JQ也支持

    安装方式两种:

    1. apm install atom-ternjs

    1. settings内部搜索插件名
    效果图:

    展开全文
  • 安装 1、monaco-editor和monaco-editor-webpack-plugin安装 npm install monaco-editor --save-dev npm install monaco-editor-webpack...2、配置vue.config.js(vue-cli3.0需在根目录中新建) const MonacoWebp...

    安装

    1、monaco-editor和monaco-editor-webpack-plugin安装

    npm install monaco-editor --save-dev
    
    npm install monaco-editor-webpack-plugin --save-dev

    2、配置vue.config.js(vue-cli3.0需在根目录中新建)

    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
    module.exports = {
        configureWebpack: {
            plugins: [
                new MonacoWebpackPlugin()
            ]
        }
    }

    3、建立公共组件monaco.vue

    <template>
      <div ref="container" class="monaco-editor" :style="'height: '+height+'px'"></div>
    </template>
    
    <script>
    import * as monaco from 'monaco-editor'
    export default {
        name: 'AcMonaco',
        props: {
            opts: {
                type: Object,
                default() {
                    return {}
                }
            },
            height: {
                type: Number,
                default: 300
            }
        },
        data() {
            return {
                // 主要配置
                defaultOpts: {
                    value: '', // 编辑器的值
                    theme: 'vs-dark', // 编辑器主题:vs, hc-black, or vs-dark,更多选择详见官网
                    roundedSelection: false, // 右侧不显示编辑器预览框
                    autoIndent: true // 自动缩进
                }
    
            }
        },
        watch: {
            opts: {
                handler(n) {
                    this.init()
                },
                deep: true
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                // 初始化container的内容,销毁之前生成的编辑器
                this.$refs.container.innerHTML = ''
                
                this.editorOptions = Object.assign(this.defaultOpts, this.opts)
                // 生成编辑器对象
                this.monacoEditor = monaco.editor.create(this.$refs.container, this.editorOptions)
                // 编辑器内容发生改变时触发
                this.monacoEditor.onDidChangeModelContent(() => {
                    this.$emit('change', this.monacoEditor.getValue())
                })
            },
            // 供父组件调用手动获取值
            getVal() {
                return this.monacoEditor.getValue()
            }
        }
    }
    </script>
    
    

    4、父组件调用

    <monaco ref="monaco" :opts="opts" @change="changeValue"></monaco>

    5、opts可配置的属性参考 更多属性

    展开全文
  • 用熟悉了写原生JS的效率要提升很多……而且,不仅支持JS还包含了nodejs snippetjavascript-snippets插件作者: zenorocha Github地址 : https://github.com/zenorocha/atom-javascript-snippets内置了丰富的JS ...

    题外话

    这款插件就比较重量级了…用熟悉了写原生JS的效率要提升很多…而且,不仅支持JS还包含了nodejs snippet

    javascript-snippets

    插件作者: zenorocha,内置了丰富的JS snippet ,而且也很好理解和记忆,耍多了会上手的。

    安装

    • 在设置中心搜索安装

    javascript-snippet

    代码片段(Tab或者Enter补全)

    Console命令

    [cd] console.dir — 这条命令可以遍历一个对象内容

    console.dir(${1:obj});
    

    [ce] console.error — 打印出信息带有错误图标

    console.error(${1:obj});
    

    [cl] console.log — 打印出信息

    console.log(${1:obj});
    

    [cw] console.warn — 打印带有警告图标的信息

    console.warn(${1:obj});
    

    DOM — 文档对象模型

    [ae] addEventListener — 事件监听

    ${1:document}.addEventListener('${2:event}', function(e) {
    	${0:// body...}
    });
    

    [ac] appendChild — 增加子元素

    ${1:document}.appendChild(${2:elem});
    

    [rc] removeChild — 删除子元素

    ${1:document}.removeChild(${2:elem});
    

    [cel] createElement — 创建元素

    ${1:document}.createElement(${2:elem});
    

    [cdf] createDocumentFragment — 创建文档碎片节点

    ${1:document}.createDocumentFragment(${2:elem});
    

    [ca] classList.add — 冷门属性,为了解决className不能解决出现…没用过

    ${1:document}.classList.add('${2:class}');
    

    [ct] classList.toggle — 同上

    ${1:document}.classList.toggle('${2:class}');
    

    [cr] classList.remove — 同上

    ${1:document}.classList.remove('${2:class}');
    

    [gi] getElementById — 获取元素ID

    ${1:document}.getElementById('${2:id}');
    

    [gc] getElementsByClassName — 获取元素类名[返回值为数组]

    ${1:document}.getElementsByClassName('${2:class}');
    

    [gt] getElementsByTagName — 获取标签集合[返回值是一个nodeList,非数组]

    ${1:document}.getElementsByTagName('${2:tag}');
    

    [ga] getAttribute — 获取属性值

    ${1:document}.getAttribute('${2:attr}');
    

    [sa] setAttribute — 设置属性值

    ${1:document}.setAttribute('${2:attr}', ${3:value});
    

    [ra] removeAttribute — 移除属性值

    ${1:document}.removeAttribute('${2:attr}');
    

    [ih] innerHTML — 代码块插入html结构

    ${1:document}.innerHTML = '${2:elem}';
    

    [tc] textContent — 纯文本,裸奔的innerHTML

    ${1:document}.textContent = '${2:content}';
    

    [qs] querySelector — HTML5新属性,获取选择器,类似JQ的$(‘div#name’)

    ${1:document}.querySelector('${2:selector}');
    

    [qsa] querySelectorAll — 同上,都支持多个选择器,但这个返回一个nodeList

    ${1:document}.querySelectorAll('${2:selector}');
    

    Loop

    [fe] forEach — 遍历数组或者对象用的方法

    ${1:myArray}.forEach(function(${2:elem}) {
    	${0:// body...}
    });
    

    [fi] for in — 遍历对象用的方法

    for (${1:prop} in ${2:obj}) {
    	if (${2:obj}.hasOwnProperty(${1:prop})) {
    		${0:// body...}
    	}
    }
    

    Function

    [fn] function — 函数声明

    function ${1:methodName} (${2:arguments}) {
    	${0:// body...}
    }
    

    [afn] anonymous function ---- 匿名函数

    function(${1:arguments}) {
    	${0:// body...}
    }
    

    [pr] prototype — 原型

    ${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {
    	${0:// body...}
    }
    

    [iife] immediately-invoked function expression — 函数表达式

    (function(window, document, undefined) {
    	${0:// body...}
    })(window, document);
    

    [call] function call — 回调函数

    ${1:methodName}.call(${2:context}, ${3:arguments})
    

    [apply] function apply — 回调函数

    ${1:methodName}.apply(${2:context}, [${3:arguments}])
    

    [ofn] function as a property of an object — 函数声明

    ${1:functionName}: function(${2:arguments}) {
    	${3:// body...}
    }
    

    Timer

    [si] setInterval — 根据设置时间不断调用的方法

    setInterval(function() {
    	${0:// body...}
    }, ${1:delay});
    

    [st] setTimeout — 同上,区别在于一般不会重复执行

    setTimeout(function() {
    	${0:// body...}
    }, ${1:delay});
    

    NodeJS

    [ase] assert.equal

    assert.equal(${1:actual}, ${2:expected});
    

    [asd] assert.deepEqual

    assert.deepEqual(${1:actual}, ${2:expected});
    

    [asn] assert.notEqual

    assert.notEqual(${1:actual}, ${2:expected});
    

    [me] module.exports

    module.exports = ${1:name};
    

    [pe] process.exit

    process.exit(${1:code});
    

    [re] require — 请求模块

    require('${1:module}');
    

    BDD

    [desc] describe

    describe('${1:description}', function() {
    	${0:// body...}
    });
    

    [ita] it asynchronous

    it('${1:description}', function(done) {
    	${0:// body...}
    });
    

    [its] it synchronous

    it('${1:description}', function() {
    	${0:// body...}
    });
    

    [itp] it pending

    it('${1:description}');
    

    Misc

    [us] use strict — JS语法使用严格模式

    'use strict';
    

    [al] alert — 弹窗

    alert('${1:msg}');
    

    [pm] prompt — 提示弹窗

    prompt('${1:msg}');
    

    结束语

    这些用熟悉了, 写代码的速度不说提升百分百,但是增加20%还是有的;
    而且还有一个好处,不会出现代码漏打字符,打错字符的情况…毕竟模版写死了;
    除非参数传错了。

    我也在学习的路上,慢慢的充实自己。

    展开全文
  • 绝对好用的文本编辑器,ckeditor_4.3.2_standard,满足多种文本编辑需求。内附多种示例代码js插件,本人成功试用。
  • 主要介绍了在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • JS富文本编辑器插件NicEdit是一款轻量级插件,跨平台的Inline Content Editor。
  • Add this to your webpack.config.js:   const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = {  plugins: [  new CopyWebpackPlugin([  {  from: '...
  • 在《【JavaScript】网页中对代码的处理,代码高亮插件SyntaxHighlighter》(点击打开链接)已经提及到,国内著名,完美兼容IE6的富文本编辑器UEditor已经自然整合代码高亮插件SyntaxHighlighter插件了,那么如何实现...
  • 一款js代码编辑插件

    千次阅读 2016-12-01 09:08:43
    一直觉得菜鸟教程里的在线工具挺不错的,将js、html、css代码在线编辑,然后运行,在线看到运行结果。 效果如图: 右击看了下源码,他用的是codeMirror插件 ,官网还挺酷http://codemirror.net/  记录下
  • 富文本编辑器插件summernote.js是一款基于jQuery Bootstarp实现的网页文本编辑器特效。
  • 用 UEditor 富文本web编辑器和轻量级、可定制化的代码高亮显示插件 Prismjs 来美化你的博客!
  • 用ACE实现网页代码编辑器和代码高亮一下链接是官网 http://ace.c9.io 提供的ace代码高亮库(不得不吐槽一下这个官网,只有这一个有效链接……) https://github.com/ajaxorg/ace/tree/master/lib/ace 将 ace.js ...
  • quill.js是一款强大的现代富文本编辑器插件。该富文本编辑器插件支持所有的现代浏览器、平板电脑和手机。它提供了文本编辑器的所有功能,并为开发者提供大量的配置参数和方法。
  • 安装代码编辑器(VSCode: Visual Studio Code) 要是还没下载的话,点击vs code官网 windows 64位下载中间这个。 安装好后就是安装语言插件(英文变中文) 我用这个编辑器来学JS,所以装一些比较常用的...
  • ace.js实现一个在线代码编辑器

    千次阅读 2020-05-21 22:07:37
    Table of Contents 背景 ACE简介: 功能实现 1、引入js ... 项目需要,在一些场景,用户需要手动编写一些js脚本来... ACE是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用...
  • 黑曜石插件,可在编辑器中突出显示代码块的语法。 编辑器语法突出显示Obsidian插件Obsidian的插件,允许在编辑器中突出显示代码块的语法。 从CodeMirror兼容性自定义插件导入代码仅适用于Obsidian v0.9.7 +。 此存储...
  • CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并具有100多种语言模式和各种插件,可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法突出显示,以帮助阅读和编辑复杂...
  • 生成代码模板格式可在设置配置) 2.批量重命名(鼠标选取好节点或文件时按[D]打开重命名界面,完成后按顺序重命名) 4.批量绑定组件(鼠标选取好节点时按[G]打开组件界面,完成后绑定组件到节点) 5.批量插入...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,629
精华内容 28,651
关键字:

js代码编辑器插件