帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:awe  cod  WEB  micr  EDI  代码编辑器  
A micro code-editor for awesome web pages.

  • 源代码名称:CodeFlask.js
  • 源代码网址:http://www.github.com/kazzkiq/CodeFlask.js
  • CodeFlask.js源代码文档
  • CodeFlask.js源代码下载
  • Git URL:
    git://www.github.com/kazzkiq/CodeFlask.js.git
  • Git Clone代码到本地:
    git clone http://www.github.com/kazzkiq/CodeFlask.js
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kazzkiq/CodeFlask.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • npm version

    CodeFlask.js

    awesome网页的微型代码编辑器。

    CodeFlask.js

    CodeFlask.js 让你轻松轻松地将代码编辑器放置到网页中。

    它是为了创建一个简洁的编辑器来实现简单的目的。 只要几行代码,就可以在浏览器中使用代码了。

    如果你想要一个健壮的网络代码编辑器,你可以检查那些大的项目,比如 CodeMirror 。

    CodeFlask.js 可以作为Web组件( 自定义元素 v1/shadow DOM v1 ) 使用。

    安装

    Bower:

    bower install codeflask

    npm install codeflask

    ( 由 cdnjs 提供。):

    https://cdnjs.cloudflare.com/ajax/libs/CodeFlask.js/0.1.1/codeflask.min.js

    如果你想的话,可以手动下载。

    用法

    为了使用 CodeFlask.js,你还需要将 Prism.js ( 代码高亮显示) 导入到你的项目中。 Prism基本上使用两个文件,一个 .js 文件和一个 .css ( 你可以在其中设置代码语法的主题) 。

    要输出行号,还需要行号插件插件。

    导入Prism后,你还需要来自 CodeFlask.js的两个文件。 它们是 codeflask.jscodeflask.css 。 两者都非常小,只需要使一切正常工作。

    例如:

    ...
    <head>
     <linkrel="stylesheet"href="prism.min.css">
     <linkrel="stylesheet"href="codeflask.css">
     <scriptsrc="prism.min.js"async></script>
     <scriptsrc="codeflask.js"async></script>
    </head>

    注意,prism.min.js 必须在 codeflask.js 之前声明为 ,因为 CodeFlask.js 对第一个。
    在你的<body> 标记末尾声明JavaScript文件,这个例子只是为了便于理解,这只是为了便于理解。

    之后,你需要做的就是定义一个要呈现编辑器的元素,并在JavaScript上调用它:

    ...
    <body>
     <divid="my-code-wrapper"data-language="javascript"></div>
     <script>var flask =newCodeFlask;flask.run('#my-code-wrapper');</script>
    </body>

    或者,你可以直接在函数调用上定义语言:

    var flask =newCodeFlask;flask.run('#my-code-wrapper', { language:'javascript', lineNumbers:true })

    记住 CodeFlask.js 主要检查 data-language 属性,然后是函数调用版本,这一点很重要。 如果没有声明这些内容,编辑器将以英镑的HTML语法表达式呈现;

    作为Web组件的使用

    另外,可以使用包含的Web组件包装器,它使用自定义元素 v1影子DOM来提供编辑器作为DOM元素。

    元素拾取提供元素的inside的文本,响应更改属性和属性,并允许通过CSS自定义属性自定义高亮颜色:

    <scriptsrc="bower_components/prism/prism.js"></script>
    <scriptsrc="bower_components/prism/components/prism-markdown.js"></script>
    <linkrel="import"href="bower_components/codeflask-editor/src/codeflask-editor.html">
    <style>codeflask-editor {height: 90vh;font-family: cursive;--color-punctuation: lime;--color-important: red; }</style>
    <codeflask-editorlanguage="markdown">
    # hello world
    Initial text here.
    </codeflask-editor>
    <script>document.querySelector('codeflask-editor').addEventListener('value-changed', console.log)</script>

    元素发出关于内容更改的value-changed 事件,从而使它的与 Polymer 兼容,这两种方式的数据绑定方式如下:

    <codeflask-editorlanguage="{{lang}}"value="{{code}}"></codeflask-editor>

    你可以直接包含脚本,而不是使用HTML导入:

    <scriptsrc="codeflask.js"></script>
    <scriptsrc="codeflask-editor.js"></script>
    正在侦听更改并更新编辑器

    你还可以在编辑器中侦听更改。 如果你想要实时地绘制你正在编码的内容,或者者检测输入代码以进行验证,这很有用。

    你可以使用 .onUpdate() 来侦听它:

    var flask =newCodeFlask;flask.run('#my-editor');flask.onUpdate(function(code) {
     console.log("User's input code: "+ code);
    });

    或者,如果要更新编辑器,则可以使用 .update():

    var flask =newCodeFlask;flask.run('#my-editor');flask.update("<button>Heeeey, whats up?</button>");
    配置 right-to-left

    如果希望CodeFlask从左侧配置开始,请将'true'传递给'rtl'参数,如下所示:

    ...constflask=newCodeFlask;flask.run('#editor', {language:'javascript', rtl:true}) // add rtl functionality
    加载多个编辑器

    如果你的页面上有许多编辑器,你可以以使用 .runAll() 而不是 .run() 来加载它们:

    ...
    <body>
     <divclass="my-code-wrappers"data-language="javascript"></div>
     <divclass="my-code-wrappers"data-language="css"></div>
     <divclass="my-code-wrappers"data-language="ruby"></div>
     <script>var flask =newCodeFlask;flask.runAll('.my-code-wrappers');</script>
    </body>

    注意:当使用 .runAll() 时,监听器和更新api的代价是 enable 。

    如何定义编辑器的大小?

    编辑器将假定它的声明的元素的大小。 你需要做的就是在样式中设置这里元素的尺寸,例如:

    ...
    <body>
     <style>#my-code-wrapper {width:350px;height:250px;position:relative; /* Position must be: relative, absolute or fixed */ }</style>
     <divid="my-code-wrapper"data-language="python"></div>
     <script>var flask =newCodeFlask;flask.run('#my-code-wrappers');</script>
    </body>

    感谢&感谢

    CodeFlask.js 是由许多比萨饼和 Prism.js,由 Lea Verou 。



    文章标签:WEB  cod  EDI  micr  awe  代码编辑器  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语