odyssey-content-editor

Odyssey Content Editor

A content editor make with quill.js & vue.js made for odyssey.wildcodeschool.fr

🚧 Work in progress 🚧

Road Map

alpha1 :

• Code Block
• Quill instance in block class
• /command system
• Numbered List Block
• Ressource Block
• Image Block
• No-writable mode
• General options
• Emit 'change' when editor change

alpha2 :

• Arrow key

alpha3 :

• Refactor: bus.$on in BlocksCollection class
• Mulitple editor on same document working
• Make placeholder configurable in options
• Add a editor empty content placeholder
• Expose Editable component
• Expose Icons components
• Improve space between components
• Improve blockAtions top position in function of block
• Fixbug with code block language selection
• Fix error on keypress arrowDow arrowUp for first and last inline block
• Drag and drop block
• Rewrite menu dropdown position (global)
• Table block

alpha4 :

• Export DropDownMenu
• Improve Bulleted & Numbered List
• Improve Ressource Block
• Detect all internal block change and $emit a global change
• Detect external of content change and update only impacted blocks
• Can define default Block ('Text' is default)

alpha4rc1

• Fix somes bug with divergent Block

alpha5

• Add trigger: 'over' on dropdown menu component
• Add checkbox block
• Add Edit icon

alpha6

• Fix visual bug due to sidebar desapear on dropdown show

alpha7

• Fix Error when content props was empty array

alpha9.2

• fix externalChangeContent bug when content return to empty array

alpha10

• Command meu always on top
• Not show block placeholder in no writable mode
• Not show button / link for not ready fonctionality
• Improve menu dropdown auto placement

alpha11

• Use h3 for subheader
• Improve dropDown menu

alpha12

• Improve block margin / font-size for a better readibility
• Fix show command menu when add a block bellow
• Some wording fix

alpha13

• Reduce selectable block margin

alpha14

• Can edit WebRessource url
• Checkbox handle one text click

alpha15

• Improve text formating

alpha16

• Correct error in text formating

TODO :

• Connection of Ressource Block with a ressource management system
• Comment system
• Key Code
• Multiple selection Block
• Icon for block
• Tooltip

Table of contents

• Installation
• Usage
• Example

Installation

npm install --save odyssey-content-editor

or

yarn add odyssey-content-editor

Usage

Use as a specific components in a parent component:

// In a .vue compoenent

<script>
import Vue from 'vue'
import { ContentEditor } from 'odyssey-content-editor'

export default {
  components: {
    ContentEditor
  }
}
</script>

<template lang="pug">
  #parent
    content-editor(@change="yourMethod")
</template>

Plugin Development

Installation

The first time you create or clone your plugin, you need to install the default dependencies:

npm install 

or

yarn

Watch and compile

This will run webpack in watching mode and output the compiled files in the dist folder.

npm run dev

Use it in another project

While developping, you can follow the install instructions of your plugin and link it into the project that uses it.

In the plugin folder:

npm link

In the other project folder:

npm link odyssey-content-editor

This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.

Publish to npm

You may have to login to npm before, with npm adduser. The plugin will be built in production mode before getting published on npm.

npm publish

Manual build

This will build the plugin into the dist folder in production mode.

npm run build

License

MIT