Giter VIP home page Giter VIP logo

Comments (2)

chloerei avatar chloerei commented on July 18, 2024

先看 https://github.com/chloerei/writings/blob/master/app/assets/javascripts/dashboard/articles/edit.js.coffee ，跟编辑器有关的是这段代码

    @editor = new Editor(
      toolbar: "#toolbar"
      editable: "#editarea .article"
    )
    @imageUploader = new Editor.ImageUploader(@editor)
    @linkCreator = new Editor.LinkCreator(@editor)

这段代码初始化了一个 editor 对象，把监控对象设为 #toolbar 和 #editarea .article，然后再安装两个 plugin：ImageUploader 和 LinkCreator。之所以把这两个做成插件是因为以前也有将编辑器抽离的想法，这两个功能生成的对话框跟 writings.io 绑定太紧密，所以可以抽离，下面只看编辑器，不管这两个 plugin 了。

Editor 相关的代码是 app/assets/javascript 下的 editor.js.coffee 和 editor/*.js.coffee 。要独立编辑器，就搭一个 demo 页面，引用这几个文件编译后的 javascript 文件，然后初始化。demo 页面的格式参考 https://github.com/chloerei/writings/blob/master/app/views/dashboard/articles/edit.html.slim 的这一部分

    = render :partial => 'dashboard/articles/edit/toolbar'
    #editarea
      .scrollable
        .editor-container
          article.article contentEditable="true" spellcheck="false" data-id=(@article.token) data-save-count=(@article.save_count) data-urlname=(@article.urlname) data-status=(@article.status) class=(@article.new_record? ? 'init' : nil) data-space=(@space.to_param) data-is-workspace=(@space.members.count > 1) data-current-user-name=(current_user.name)
            = article_format_body @article.body

toolbar 部分还要打开局部模板看结构。toolbar 的功能绑定是根据 data-command='bold' 元素的 click 事件，跟 https://github.com/chloerei/writings/blob/master/app/assets/javascripts/editor/formator.js.coffee 里的方法相对应的。

不知道你看明白了没有，我想表达的是：抽出来可不容易。

from writings.

guotie avatar guotie commented on July 18, 2024

了解，非常感谢！

from writings.

Related Issues (6)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.