0.1.2 • Published 8 years ago

sqedt v0.1.2

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

SQEDT : a Html VisualEditor

this is my first Html Component

current version 0.1.2

Here is Demo based on 0.0.5

Function


Finished

  • default input
  • drag words or paste words
  • add/remove Bold/Italic/Underline/DELETE
  • addCallback
    • font info (Bold/Italic/Underline/DELETE)
    • font size
    • font color
    • para align
    • specified template callback (Tag a/Tag img)
  • modify layout
    • drag&drop
    • drag to add template
  • add template

more function will be added

Coming soon

  • change font size to bigger/smaller
  • shortcut key cmd+i/cmd+b...

Planned

  • layout editor

Get Start

Install

npm install sqedt

use it in web project, like Vue.js/React.js, there are ES6 code in sqedt/ES.

import sqedt from 'sqedt'
//or
var sqedt = require('sqedt')

let edt = document.getElementById('edt');

let edtor = new sqedt(edt);

edtor.init();

style in dist/style.css

import 'sqedt/dist/style.css';

edit document

edtor.editDoc();

command

/**
 * @param {number} level   0:inline,1:para,2:full doc
 * @param {number} type
 * @param {string} string
 */
edtor.commadn({level:0,type:0,value:''})

i'm building the api for all command

modify layout

edtor.editLayout();

drag template in document

the drag-edt-value is keywords

<div>
  <div id="drags">
    <div class="drag-item" draggable="true" data-edt-drag="h1">Title</div>
    <div class="drag-item" draggable="true" data-edt-drag="img">Img</div>
    <div class="drag-item" draggable="true" data-edt-drag="ul">UL</div>
  </div>
</div>
<script>
let drags = document.getElementById('drags');
let {dragstart,dragend} = edt.getDragin();

drags.addEventListener('dragstart',dragstart);
drags.addEventListener('dragend',dragend);
</script>

you can add your own template

edtor.addTemplate({value:'ul',innerHTML:'<ul><li>item 1</li><ul>'});

addCallback

type

1 is selection status, value is { inline, para, full} style

2 is template callback, value{ type, el } el is element instance

/**
 * @param {number}  type
 * @param {object}  value   
 */
edtor.addCallback(({type,value})=>{
  if(type == 2){
    // img callback
    if(value.type === 'img'){
      let img = value.el.getElementsByTagName('img')[0];
      let newurl = prompt("input img url", img.src);
      img.src = newurl?newurl:img.src;
    }
  }
});

to be continue

Learning


i'm still learning JS and other front-end stuff

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago