Hypertext-editor NPM

hypertextEditor

Getting Started

Node

npm install hypertext-editor -S

Brower

jsdelivr:

<script src=""></script>
<script>
  const editor = new HypertextEditor({
    el: "#editor",
    ...
  })
</script>

Usage

import Editor from "hypertext-editor"
const editor = new Editor({
  el: "#editor",
  content: "默认文本",
  maxlength: 12,
});

You can find more examples here.

Events

Event	Description	Arguments
`change`	编辑区内容改变	-
`selectionchange`	编辑区选区改变	`state`："color"\|"bold"\|"fontSize"\|"text"

Example:

editor.on("change", function () {
  console.log("编辑结果：", this.content);
});
const handle = editor.on("selectionchange", function (state) {
 console.log("选区内容状态：", state); // 选区清除时返回 null
});
editor.off("selectionchange", handle);

Options

static defaultOptions = {
  el: "#editor", // Selector or element
  content: "",  // default content
  maxlength: Infinity, // Max length of text content
  mode: "textarea", // "textarea" | "input"
};

Properties

editor.el: 编辑区dom
editor.content: 编辑区html内容
editor.text: 编辑区纯文本内容
editor.color: 编辑区文字颜色值
editor.bold: 编辑区文字加粗状态
editor.fontSize: 编辑区文字字号

Methods

editor.format(attr, value): 仅对当前选区文本格式化 attr:["color"|"bold"|"fontSize"]
editor.formatText(attr, value): 对编辑区整体文本格式化，参数同 format
editor.on(event:String, cb:Function) : 添加事件监听
editor.off(event:String, handler:Function) : 移除事件监听
editor.getSelection(): 获取编辑区选区(选区API集合)

Planned Features

Placeholder
Parsing textContent styles
Supports emoticons, images, videos,
Import font-family, heading, backgrounds, margins paddings, border

FAQ

选区丢失导致设置颜色失败

选中编辑区文字后，点击颜色控件时，编辑区选区丢失

解决：

控件使用 button 元素类型或取消控件的 mousedown 事件默认行为

$colorPicker.addEventListener("mousedown", (event) => {
  event.preventDefault();
});

第三方控件设置颜色（以pickr为例）

颜色控件的设置颜色面板存在颜色值输入框，输入颜色值时编辑区选区丢失

解决：

颜色面板展开时，手动存储选区；颜色面板关闭/颜色值设置完成时，手动恢复选区后再调用editor设置颜色API

// 选区保存与恢复
let selection;
pickr.on("show", () => {
  selection = editor.getSelection();
  selection.saveRange(); // 存储选区
});

pickr.on("save", () => {
  selection.restoreRange(); // 恢复选区
  const colorString = pickr.getColor().toRGBA().toString(0);
  editor.format("color", colorString); // 设置颜色
  $colorPicker.style.backgroundColor = colorString;
  pickr.hide();
});

单行输入框

自定义 #editor 样式

#input {
  width: 240px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  overflow-x: auto; // 横向滚动
  white-space: nowrap;  // 单行
}

const editor = new HypertextEditor({
  el: "#input",
  mode: "input",
  ..
})