能够插入 DOM 的输入框

简易富文本编辑器

使用input、textarea 这种输入框会出现一个问题，就是无法在其中写入 DOM 结构，浏览器不会把 DOM 进行渲染，这样的话在某些情况下使用他们只会浪费时间，复制粘贴半天，发现没办法放 UI 内容，无敌了孩子。

如果你的内容需要很多操作可以选择去使用富文本编辑器，这里就说一下怎么写一个简单的富文本编辑器。

html 复制代码

     <div
        id="editor"
        contenteditable="true" // 赋予容器可编辑的能力
        ref="editorRef"
      ></div>

只要是 DOM 能放的结构，他都可以。

他也有一些缺点，就是没有input简便，好写，而且它只有一部分 input 对应的方法，比如以下常见方法：

input
paste
blur、focus
keydown、keyup

如何插入 DOM（组件）和文本

插入 DOM

js 复制代码

const textNode = document.createTextNode(featureData.description); // 创建文本
const placeholder = document.createElement('span'); // 创建节点
placeholder.contentEditable = false; // 不可编辑
// 变量记录文本节点
featureData.lastTextNode = textNode;
featureData.lastTagHolder = placeholder; 
// 在编辑器最前方进行插入
editor.insertBefore(textNode, editor.firstChild);
editor.insertBefore(placeholder, editor.firstChild);

在vue的程序里面想要在普通函数中动态创建、挂载、操作组件可以通过vue提供的createApp去创建vue的节点

js 复制代码

const app = createApp({
    render: () =>
      h(Tag, {
        text: featureData.title, // 组件 props 
        bgColor: featureData.bgColor, // 组件 props 
        onClose: () => {
          featureData.lastApp?.unmount();
          featureData.lastApp = null;
          featureData.lastTextNode?.remove();
          featureData.lastTagHolder?.remove();
          featureData.lastTextNode = null;
          featureData.lastTagHolder = null;
        },
      }),
  });
  app.mount(placeholder);
  featureData.lastApp = app; // 记录app实例进行卸载

h 函数

用于创建虚拟节点，可以渲染多个/嵌套/动态结构。

渲染组件 vnode 时 children 参数需要通过插槽函数书写，可以通过设置props为null避免将插槽识别为props。

渲染为 html 的节点 children 可以随意文本或者数组传递多个节点。

js 复制代码

function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots   // 为组件时需要通过插槽函数
): VNode

h( 
    组件 / 标签名, 
    属性、props、事件, 
    子节点/内容            // 子节点不是插槽就可以省略 props 书写
)
// 多个节点
h(
    'div'
    null,
    [
        h('div','文字') 
    ]
)
// 动态结构
h('div', isShow ? h(Tag) : h('span', '无标签') )

// 组件插槽传递 vnode
h(Components,null,{default:()=>'你的内容'})// 默认插槽

// html节点
h('div',null,['文字', h('span', '内容')])

鼠标选中区域

可以通过选中区域对文本区域进行记录，选中区域内容、获取选区范围等等，可以用于加粗、添加标题。

js 复制代码

// 创建鼠标选区
  const range = document.createRange();
  // 设定鼠标选中区域
  range.setStartAfter(textNode); // 在 textNode 后面开始
  range.setEndAfter(textNode);   // 在 textNode 后面结束
  // 获取选区管理
  const sel = window.getSelection();
  // 获取选中文字
  const selectedText = sel.toString()
  // 获取第一个选区
  const range = sel.getRangeAt(0)
  // 移除先前选区
  sel.removeAllRanges();
  // 记录当前鼠标选区
  sel.addRange(range);

能够插入 DOM 的输入框

简易富文本编辑器

如何插入 DOM（组件） 和文本

插入 DOM

h 函数

鼠标选中区域

如何插入 DOM（组件）和文本