sqedt v0.1.2

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