Giter Club home page Giter Club logo

editorjs-multicolumn's Introduction

EditorJS Multiple Column Layout

This is a test for multiple columns without nested elements. Using Bootstrap like grid system and display float (rather than flex) for each block.

UPDATED: Please refer to this codex-team/editor.js#836 there is a better solution now CHECKOUT THIS https://github.com/hata6502/editorjs-layout#readme [Multi Column Layout]

Test With Demo

  • Please note that this is just a test and this is not for production Related Topic

Installation

Use editor.js file

<script type='text/javascript' src='editor.js?ver=multicolumn'></script>

Please add this css styles

  /* Editor CSS */
  #editorjs{max-width: 650px;margin: 0 auto}
  /* .codex-editor__redactor{display: flex;flex-wrap: wrap;flex-direction: row;} */
  .codex-editor__redactor{}
  /* .ce-block{width: 100%;padding-left: 0;padding-right: 0;} */
  .ce-block{width: 100%;float: left;padding-left: 0;padding-right: 0;}

.es-col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.es-col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.es-col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.es-col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.es-col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.es-col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.es-col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.es-col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.es-col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.es-col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.es-col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.es-col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

  .cdx-settings-input{border: 1px solid rgba(201,201,204,.48);-webkit-box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);border-radius: 3px;padding: 3px 8px;outline: none;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;}
  .cdx-small{font-size: .6rem}
  .ce-block__content{max-width: 100%}

  .cdx-settings-button.disabled,.ce-settings__button.disabled{pointer-events: none;opacity: .5}
  .cdx-settings-sidebar{position: absolute;left: 100%;bottom:0;background: #fff;width: 108px;height: 145px;box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);border-radius: 0 4px 4px 0;z-index: 0;}
  /* Editor CSS - END */

editorjs-multicolumn's People

Contributors

oodeveloper avatar

Stargazers

 avatar

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.