精华内容
下载资源
问答
  • 代码编辑器 您将在此存储库中找到编辑器代码
  • W3School中,推荐使用Notepad (PC) 或 TextEdit (Mac)来编写并验证HTML/CSS代码 ... 在这里,实现了一个建议的HTML代码编辑器, 同时可以实时的将网页内容显示出来.程序运...

    W3School中,推荐使用Notepad (PC) 或 TextEdit (Mac)来编写并验证HTML/CSS代码 (https://www.w3school.com.cn/html/html_editors.asp).

    使用Notepad编写HTML代码, 保存成HTML类型文件, 通过浏览器打开三个步骤. 在这里,实现了一个建议的HTML代码编辑器, 同时可以实时的将网页内容显示出来.

    程序运行的界面是这样的:

    b7343f94f21fbbc10a96bb28af9ccfc4.png

    左面窗口, 输入HTML代码, 右面自动会将HTML解释的结果显示出来.

    代码如下:

    HTML Coded TEST

    这是一个HTML/CSS代码的测试软件

    请输入你的HTML/CSS代码

    请输入你的HTML/CSS代码

    Coded

    function coded(){

    var strCode = document.getElementById("textareaCode").value;

    document.getElementById("html_code").innerHTML = strCode;

    }

    代码解释:

    1  在这个代码中, 使用了一个 div(container)限定一块区域, 然后左面加入一个文本域(textarea) 用来输入HTML代码, 右面加入一个div(textareaCoded), 用来显示Web页面.

    2 编写JavaScrip程序, 用来将左面文本区域输入的代码, 搬到右面去

    function coded(){

    var strCode = document.getElementById("textareaCode").value;

    document.getElementById("html_code").innerHTML = strCode;

    }

    3. 在文本域中,加入键盘输入相应事件,用来实时的显示解释的代码.

    οnkeypress="coded()

    4. 你也可以将HTML代码拷贝到左面的窗口, 然后点击下方的Coded按钮, 把代码显示出来

    Coded

    展开全文
  • 如何写一个代码编辑器

    千次阅读 2019-10-17 22:36:25
    演示什么是代码编辑器 演示当我们看到这编辑器的时候,你有没有好奇这是这么出来的?如果是让你来,你会怎么?闲扯 学无止境,我们现在的技术都是基于前一代人之上出来的...

    演示什么是代码编辑器

    演示

    当我们看到这个编辑器的时候,你有没有好奇这是这么做出来的?如果是让你来做,你会怎么做?

    闲扯

    学无止境,我们现在的技术都是基于前一代人之上做出来的,要想成为一个高级/资深的前端,重点不是你能创造多少东西,而是你知道多少东西。有没有解决问题的能力。遇到问题能不能找到最优解,为公司减少成本的同时提升效率。系统性的解决问题,提高代码的维护性、稳定性、可扩展行等等。所以现代社会是一个认知的社会,只有不断的突破自己的认知,才能够成为更优秀的人。

    最近在搞公众号,虽然公众号已经写了快两年了,但是一直没有推广过。最近打算推广,加了好多大佬的微信,我感觉我之前做的事情就是小巫见大巫,根本不值一提,前方还有好长的路要走,我隐隐感觉有点兴奋,因为只有迎难而上、才能迎刃而解。关注我公众号,前路漫漫,一起修行!

    正题

    当我们想做一个事情的时候,往往最难的不是做,而是不知道从哪做起,怎么做?我的每篇文章都会讲我是如何去一点点解决问题的,希望能够尽我的绵薄之力帮助有心之人。

    1. 看到网站之后不要急着去百度,因为百度有太多无用的信息干扰你,而且这些无用的信息很可能会把你的注意力转移,最后忘了你为什么要百度!

    2. 以 codepen 官网为例,我是如何去查他用了什么技术?

    • 思考,这种编辑器的功能一定是有开源库的,因为好多网站都使用过,那么顺着思路走,找到这个开源库的名字,我们就完成一半了。

    • 怎么找,首先右击打开检查,查看 Network 有没有有用的信息,比如加载了哪个js,在js源码中找到一些线索(一般都会被打包过了,找到的几率不大)。然后打开元素检查,查找 class  名称有没有一些蹊跷

    • 为什么找 class ,因为 class 最能直观的找到表达者的意图

    class

    我们找到了一个很可疑的单词 CodeMirror

    接下来去 github 上搜索一下 CodeMirror

    class

    果然被我们找到了,点进去查看他的用法。接下来你应该知道怎么做了~

    动工

    上面讲解的是我如何找工具的方法,我现在使用的不是 CodeMirror,但是我也是通过这种方法找到的。我接下来用 monacoEditor 来讲解我的做法。

    加载 monaco 脚本

    这是一段加载 monaco 的js。主要逻辑就是 load 一段 js,将 monaco 注册到 window 上

    export default {
    // https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min/vs/loader.js
    load(srcPath = 'https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min', callback) {
    if (window.monaco) {
    callback();
    return;
    }
    const config = {
    paths: {
    vs: srcPath + '/vs'
    }
    };
    const loaderUrl = `${config.paths.vs}/loader.js`;
    const onGotAmdLoader = () => {
    if (window.LOADER_PENDING) {
    window.require.config(config);
    }

    window.require(['vs/editor/editor.main'], () => {
    callback();
    });

    // 当AMD加载器已被加载时调用延迟的回调
    if (window.LOADER_PENDING) {
    window.LOADER_PENDING = false;
    const loaderCallbacks = window.LOADER_CALLBACKS;
    if (loaderCallbacks && loaderCallbacks.length) {
    let currentCallback = loaderCallbacks.shift();
    while (currentCallback) {
    currentCallback.fn.call(currentCallback.window);
    currentCallback = loaderCallbacks.shift();
    }
    }
    }
    };

    if (window.LOADER_PENDING) {
    // 我们需要避免加载多个loader.js时
    // 有多个编辑器同时加载延迟调用回调除了第一个
    window.LOADER_CALLBACKS = window.LOADER_CALLBACKS || [];
    window.LOADER_CALLBACKS.push({
    window: this,
    fn: onGotAmdLoader
    });
    } else {
    if (typeof window.require === 'undefined') {
    const loaderScript = window.document.createElement('script');
    loaderScript.type = 'text/javascript';
    loaderScript.src = loaderUrl;
    loaderScript.addEventListener('load', onGotAmdLoader);
    window.document.body.appendChild(loaderScript);
    window.LOADER_PENDING = true;
    } else {
    onGotAmdLoader();
    }
    }
    }
    }

    封装组件

    写一个组件将加载执行的逻辑封装在这个组件里,暴露出一些 api,提供给调用者使用

    <template>
    <div :style="style"></div>
    </template>

    <script>
    import monacoLoader from './MonacoLoader'
    const debounce = require('lodash.debounce');

    export default {
    props: {
    // 编辑器的宽,默认 100%
    width: { type: [String, Number], default: '100%' },
    // 编辑器的高,默认 100%
    height: { type: [String, Number], default: '100%' },
    // 传进来的代码,一段字符串
    code: { type: String, default: '// code \n' },
    // 资源路径
    srcPath: { type: String },
    // 默认使用 js
    language: { type: String, default: 'javascript' },
    // 主题 默认 vs-dark
    theme: { type: String, default: 'vs-dark' }, // vs, hc-black
    // 一些 monaco 配置参数
    options: { type: Object, default: () => {} },
    // 截流
    changeThrottle: { type: Number, default: 0 }
    },
    // 加载资源
    created() {
    this.fetchEditor();
    },
    // 销毁
    destroyed() {
    this.destroyMonaco();
    },
    computed: {
    style() {
    const { width, height } = this;
    const fixedWidth = width.toString().indexOf('%') !== -1 ? width : `${width}px`;
    const fixedHeight = height.toString().indexOf('%') !== -1 ? height : `${height}px`;
    return {
    width: fixedWidth,
    height: fixedHeight,
    };
    },
    editorOptions() {
    return Object.assign({}, this.defaults, this.options, {
    value: this.code,
    language: this.language,
    theme: this.theme
    });
    }
    },
    data() {
    return {
    defaults: {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: 'line',
    automaticLayout: false,
    glyphMargin: true
    }
    }
    },
    methods: {
    editorHasLoaded(editor, monaco) {
    this.editor = editor;
    this.monaco = monaco;
    this.editor.onDidChangeModelContent(event =>
    this.codeChangeHandler(editor, event)
    );
    this.$emit('mounted', editor);
    },
    codeChangeHandler: function(editor) {
    if (this.codeChangeEmitter) {
    this.codeChangeEmitter(editor);
    } else {
    this.codeChangeEmitter = debounce(
    function(editor) {
    this.$emit('codeChange', editor);
    },
    this.changeThrottle
    );
    this.codeChangeEmitter(editor);
    }
    },
    fetchEditor() {
    monacoLoader.load(this.srcPath, this.createMonaco);
    },
    createMonaco() {
    this.editor = window.monaco.editor.create(this.$el, this.editorOptions);
    this.editorHasLoaded(this.editor, window.monaco);
    },
    destroyMonaco() {
    if (typeof this.editor !== 'undefined') {
    this.editor.dispose();
    }
    }
    }
    };
    </script>

    完成演示

    使用组件,将组件显示在页面上。并将 console.log 收集起来,执行完代码之后将其打印在屏幕上。

    最后会有演示

    <template>
    <div>
    <MonacoEditor
    height="300"
    language="typescript"
    :code="code"
    :editorOptions="options"
    @codeChange="onCodeChange"
    >
    </MonacoEditor>
    <div class="console">{{ res }}</div>
    </div>
    </template>
    <script>
    import MonacoEditor from '../../components/vue-monaco-editor';
    let logStore = [];
    export default {
    components: {
    MonacoEditor
    },
    data() {
    return {
    result: 'noop',
    // 默认 code
    code:
    `const noop = () => {
    console.log('noop')
    }
    noop()
    `
    ,
    options: {}
    };
    },
    methods: {
    clear() {
    this.result = '';
    logStore = [];
    },
    // 重写consolelog,并储存在logStore内
    overwriteConsoleLog() {
    console.log = function(...arg) {
    logStore.push(arg);
    };
    },
    // 抽象出一层修饰层
    modify(e) {
    if (typeof e === 'object') e = JSON.stringify(e);
    return e;
    },
    // 输出
    printf(oriConsole) {
    const _this = this
    logStore.forEach(item => {
    function str() {
    return item.map(_this.modify);;
    }
    oriConsole(str(item));
    this.result +=
    str(item)
    .join(' ') + '\n';
    });
    console.log = oriConsole;
    },
    onCodeChange(code) {
    // 保存 console.log 对象
    const oriConsole = console.log;
    // 清空副作用
    this.clear();
    // 重写 console.log,为了将控制台打印值输出在页面上
    this.overwriteConsoleLog();
    // 获取代码的片段字符串
    const v = code.getValue();
    try {
    // 执行代码
    eval(v);
    // 将控制台打印值输出在页面上
    this.printf(oriConsole)
    } catch (error) {
    console.error(error)
    }
    }
    }
    };
    </script>
    <style lang="scss">
    .editor {
    width: 100%;
    height: 100vh;
    margin-top: 50px;
    }
    .console {
    height: 500px;
    background: orange;
    font-size: 40px;
    white-space: pre-wrap;
    }
    </style>

    效果演示

    小结

    又到了小结时刻,当我们看见一个很厉害的东西的时候,不要害怕,其实你也可以,大部分的功能其实已经被别人封装好了,我们都是站在巨人的肩膀上。

    我会经常分享一些自己工作经验、技术体会、做的小玩意等等。更大家一起学习。

    看别人十遍,不如自己动手写一遍,我的这些源码和文章都在这里,可以自己下载下来运行一下试试。

    https://github.com/luoxue-victor/source-code/tree/master/src/views/monacoEditor

    最后两件小事拜托大家

    1. 有想入群的学习前端进阶的加我微信 luoxue2479 回复加群即可

    2. 我的 github 地址,所有我的文章及源码都在这里,欢迎来star

    https://github.com/luoxue-victor/source-code

    1. 我总结了一些 TODO,有兴趣的同学可以一起来

    https://github.com/luoxue-victor/source-code/issues

    展开全文
  • 用flex4.6一个简单的代码编辑,主要是实现关键词显色,和行号显示,保存和打开文件。功能挺简单,主要是里面的逻辑关系。现在的效率也不是很高,大家如果有什么好建议的话,欢迎批评指出 效果图: ...

    原文地址:http://www.chenlinsheng.com/?p=211

    用flex4.6做了一个简单的代码编辑,主要是实现关键词显色,和行号显示,保存和打开文件。功能挺简单,主要是里面的逻辑关系。现在的效率也不是很高,大家如果有什么好建议的话,欢迎批评指出

    效果图:

    20130406084025

    (挺简陋的,别吐槽哈~)

    主要用到的知识:
    1.正则:
    private var regEx:RegExp = new RegExp(“\n|\r|;|=”, “g”);

    2.TLF 文本:
    tf=new TextLayoutFormat();
    tf.color=0&times;000000;

    3.字符串操作:
    var text :String = code.text.toUpperCase().replace(regEx,” “);
    var str:String=text.substr(an,code.text.length);
    var strArr:Array=str.split(” “);

    4.获取行号:
    var line:uint = code.mx_internal::textContainerManager.numLines;

    5.保存与打开:使用file类
    file = new File(“/未命名.as”);
    file.addEventListener(Event.SELECT, selectSaveFile);
    file.browseForSave(“保存文本文件”);

    =》原文网盘下载

    推荐:

    转载于:https://my.oschina.net/clschen/blog/120418

    展开全文
  • 前段时间项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个简单的,易于在源码上...
  • 在线高亮代码编辑器,能够对代码进行高亮着色编辑在线演示:http://jerrywang.zoka.cc/editor/editor.html源代码在Google Code:http://code.google.com/p/code-syntax-highlight-editor/source/checkout文档:...

    在线高亮代码编辑器,能够对代码进行高亮着色编辑

    在线演示:http://jerrywang.zoka.cc/editor/editor.html

    源代码在Google Code:http://code.google.com/p/code-syntax-highlight-editor/source/checkout

    文档:http://www.codeproject.com/KB/HTML/CodeSyntaxHighlightEditor.aspx

    style="width:100%; height:800px;overflow:hidden" src="http://jerrywang.zoka.cc/editor/editor.html" scrolling="0" frameborder="0">

    ASP.NET

     

    PHP

     

    JSP

     

     

     

    支持 ASPX/JSP/PHP/JAVA/C#/C++/Javascript/CSS/HTML/XML/SQL/VBScript

     

     

     

     

    展开全文
  • 一个java简单文本编辑器代码

    万次阅读 2007-11-10 16:15:00
    下面是我的一个简单java程序代码,可以练习下。有的功能没弄完,有兴趣的可以完成他,对学java 很有帮助。package swing;import java.awt.*;import javax.swing.*;import java.awt.event.*;import java.io.File;...
  • 希望能对需要的朋友有所帮助,代码下载:[url=http://code.google.com/p/my-editor-huanzai/downloads/list]http://code.google.com/p/my-editor-huanzai/downloads/list[/url] 同样希望大家指点 注意:1.本机...
  • RDC代码编辑器

    2020-10-29 20:39:36
    介绍 大家好,我是朝思墓想。最近我用c语言的windows api一个代码编辑器,有退出、保存、编译这些基础操作,我的可执行文件(.exe)会在我的博客园发布。
  • 实现代码编辑器

    2016-03-05 12:24:12
    上一次曾经发布过一篇如何实现一个代码编辑器。今年工作中得空,所以对这个编辑器进一步了些更新,把名字改成了从CuteC改成了CEditor。主要是重写了软件的界面(最终还原朴素),重写了编辑控件语法高亮的着色方式...
  • 做一个 商品bbs,客户要求支持 ubb ,同时也要 做一个 编辑器 。现在我把做 ubb 的思路给大家讲一下。  首先遇到的是界面问题,实际上这个很好解决,只是利用td的onmouseover、onmouseout和onmousedown来实现,...
  • 个人博客,不可避免会用到编辑器去录入文章,而程序员的文章中又不可避免会有很多代码。现在所见即所得的编辑器似乎对代码录入不太友好,所以笔者通过marked.js和highlight.js实现了自己的简易Markdown编辑器。 ...
  • 这里的单页面的编辑器,引用的vue+element-ui,当做bootstrap来用。因为单界面new vue会导致codemirror无法使用。 codemirror好处就是可以实时编辑,有用过highlight框架,但是实时编辑,高亮效果就会失效。 ...
  • 准备 请使用以下使用 npm 下载以下的包 bootstrap: “^3.4.1”, ...代码 效果图: [外链图片转存失败(img-nJzZLHDz-1564754147043)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1564752584699....
  • MASM汇编代码编辑器

    2010-08-25 20:45:00
    MasmEd是一款专门针对Masm32的汇编代码编辑器,并内置了一个资 源编辑器,方便程序员编写Windows软件,与其同胞兄弟RadASM比较, 它更适合汇编初学者使用。
  • C#编辑器代码

    千次下载 热门讨论 2003-02-27 00:00:00
    份H.Prasad写的Editor的C#代码,skm发现了四、五BUG, 些修改与笔记(见代码中注释),希望大家来一起把这简单的文本编辑器做得更好。C#完整应用程序代码
  • 仿照OgreSE的的Ogre场景编辑器OgreEditor,完全重写原来的代码并有所简化,并按照自己的想法实现,界面和功能大体一致。目前未进行详细的测试,Bug在所难免,学习之用。当所有Bug修正后将把源代码也弄出了。
  • 介绍: HTML5网页在线代码编辑器,代码高亮显示,输入代码爆炸动态效果显示。...如果谁改造一下运行功能,那基本可以做一个在线编辑运行软件引流了 网盘下载地址: http://kekewl.net/wuUMvvBxIzk0 图片: ...
  • 昨天遇到一个问题,需求过来的图是需要应用到代码编辑器,顾名思义,就是类似于富文本编辑器一样,编辑器中可识别代码格式高亮、根据设置的文本类型设置不同的格式等等。 初步设想:百度一查,应有尽
  • 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮、自动缩进、智能提示等功能。发现Code Mirror刚好满足所有需求。Code Mirror是由js写的一款插件,其功能非常强大,用来实现网页端代码编辑器非常方便。...
  • Understand代码编辑器

    2020-05-19 17:37:14
    如果你的代码是安全的或者是任务关键的,或者比一个人可以处理的代码大,那么你应该自己去尝试理解。理解会帮助你发现你的代码什么以及为什么,你很快就会想知道你没有它的生活。加入已经了解他们的代码的其他20...
  • 每周荐:代码编辑器sublime

    千次阅读 2012-05-10 21:17:02
    无意中发现了一个外观酷酷的代码编辑器:sublime,起初还以为就是一“花瓶”。网上随便搜了下,sublime原来还是比较强力的(据说想要干掉Mac下面的TextMate)。MacOS、Linux、Windows平台下都可以使用,支持各种插件...
  • 编写php,python,html,xml等多种开发语言的代码编写工具
  • 刚好我在用Unity3D的时候感觉Mono启动很慢,用VS2012就更慢了,所以想自己做一个代码编辑器 当然是简单的那种。。 今天先是代码分析: 首先把源文件读到内存中,然后通过状态机分析,保存到一个叫...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,490
精华内容 1,796
关键字:

做一个代码编辑器