Content-editable-extension-js NPM

content-editable-extension-js

Extend the content-editable-js to insert emoji images, common format images, and implement the @input association function.

Getting started

Add the library

<!-- With CDN -->
<script src="https://unpkg.com/content-editable-extension-js/dist/content-editable-extension-1.0.0.js"></script>
<!-- Locally -->
<script src="dist/content-editable-extension-1.0.0.js"></script>

Installation

npm install content-editable-extension-js --save

Usage

<div class="div-text"></div>
<script src="https://unpkg.com/content-editable-extension-js/dist/content-editable-extension-1.0.0.js"></script>
<script>
const textarea = document.getElementsByClassName('div-text')[0];
const ceExtension = new CEExtension(
  textarea,                   // Set content-editable dom
  1,                          // Determine if you need to associate, default value 1
  autoCompleteHandle          // associate callback, default empty method
);

function autoCompleteHandle(isNeedObj) {
  // your logic
}
</script>

Documentation

Methods

insert()

The function inset( htmlStr: string, isAssociate: boolean | number ) inserts content into the cursor in the current element

const img = '<img src="./images/oip-c.jpg" alt="图片" />';
ceExtension.insert(img);

static setCursorToLast()

The function CeExtension.setCursorToLast( dom: HTMLElement ) sets the rear side of the cursor positioning content.

CEExtension.setCursorToLast( textarea );

static setPositionOfAssociateList()

The function static setPositionOfAssociateList(associateList: HTMLElement, outermostEleForAssociateList: HTMLElement) Sets the position of the association list.

getValue()

The function getValue() get element value.

const value = ceExtension.getValue();

Input the completion

Input '@ds', automatically associate 'dsewsd', 'dseewwe', 'dsios', etc. You can watch the demo

Usage

First you need to specify a parent container for the association list and set position to relative.
The association list needs to be customized, And abbreviate the click event, and insert the current value when clicking.
Entering' @sew' will trigger associations. At this time, you need to request the background interface to get the entered associations and render the association list.
You need to call the CEExtension.SetPositionOfAssociateList() method to reposition the associative list.

<!DOCTYPE html>
<html>
<head>
  <title>Div contenteditable</title>
  <meta charset="utf-8"/>
  <meta httP-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <style>
    * { box-sizing: border-box;}
    .container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
      position:relative;
    }
    .div-text {
      width: 500px;
      height: 300px;
      overflow: hidden;
      border: 1px solid #eee;
      outline: blue;
    }
    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .auto-complete {
      display: none;
      min-width: 200px;
      border: solid 1px #eee;
      background: #fff;
    }
    .auto-complete:last-child {
      border-bottom: 0;
    }
    .auto-complete li {
      height: 40px;
      padding: 0px 10px;
      line-height: 40px;
      border-bottom: solid 1px #eee;
      cursor: pointer;
    }

  </style>
</head>
<body>
<div class="container">
  <div class="div-text"></div>
  <div>
    weasdfkalsdfjawefwwwe
    safsasfa
  </div>
  <!-- Auto-complete as you enter -->
  <ul class="auto-complete">
    <li>eweeewwwe</li>
    <li>uuiiius</li>
  </ul>
</div>

<script src="../dist/content-editable-extension-1.0.0.js"></script>
<script>
(function(){
  const textarea = document.getElementsByClassName('div-text')[0];
  const outermostEleForAssociateList = document.querySelector('.container');
  const autoCompleteContainer = document.getElementsByClassName('auto-complete')[0];
  const ceExtension = new CEExtension(textarea, 1, autoCompleteHandle);

  // Input associative callback processing
  function autoCompleteHandle(isNeedObj) {
    const timer = setTimeout(function() {
      const { isNeed, inputStr } = isNeedObj;
      let data = [];
      if ( isNeed ) {
        const res = httpGet(inputStr);
        const { status } = res;

        if ( status === 200 ) {
          data = res.data;
        }

        CEExtension.setPositionOfAssociateList(autoCompleteContainer, outermostEleForAssociateList);
      }
      let lis = ''
      data.forEach(function(value) {
        lis += `<li>${value}</li>`;
      });
      autoCompleteContainer.innerHTML = lis;
      const { display } = getComputedStyle(autoCompleteContainer);
      
      if ( display === 'none' ) {
        autoCompleteContainer.style.display = 'block';
      }
    }, 500);
  }

  // Mock HTTP requests (input associations)
  function httpGet(inputStr) {
    return {
      status: 200,
      data: inputStr ? ['eweeewwwe', 'uuiiius', 'ooowwwtt', 'ppssssewwe', 'ewxxsssekk'] : [],
      message: 'success'
    };
  }

  autoCompleteContainer.addEventListener('click', function(e) {
    const target = e.target || e.srcElement;
    const { tagName } = target;

    if ( tagName === 'LI' ) {
      const [value, isAssociate] = [target.innerHTML, 1]
      ceExtension.insert(`${value}&nbsp;`, isAssociate);
      autoCompleteContainer.style.display = 'none';
    }
  })
})()
</script>
</body>
</html>

Support

Content Editable is built for modern web browsers. Supports for IE. For bugs and suggestions, open an issue here.

Contribute

Feel free to make a PR! Once cloned, use these commands:

npm install # or yarn install
npm run dev
npm run build # before commit

Licence

MIT

contenteditable contenteditor content-editable content-editable-extension live editor

1.0.1

2 years ago

1.0.0

2 years ago