轻网页聊天框架

在线演示：

本框架大部分聊天对话所要求的样式特性已完成，能够助你快速开发聊天类对话界面

使用指南 (指北)

获取 LiteWebChat

我们提供了多种方式来获取 LiteWebChat_Frame， ~~你也可以通过各种奇淫技巧获取使用。~~

1.下载文件

你可以直接从 GitHub 项目官网直接克隆下载，其中 dist 目录包含了压缩过的和未压缩过的 CSS、JS 、示例以及图片文件。

2.直接引用

对话框

<!-- 两个任选一个 github pages -->
<link
  type="text/css"
  href="https://lab.morfans.cn/LiteWebChat_Frame/dist/css/litewebchat.min.css"
  rel="stylesheet"
/>

<!-- 两个任选一个 jsdelivr -->
<link
  type="text/css"
  href="https://cdn.jsdelivr.net/gh/MorFansLab/LiteWebChat_Frame/dist/css/litewebchat.min.css"
  rel="stylesheet"
/>

输入框

注意：对话框可以单独被使用，输入框必须和对话框配合使用。

<link
  type="text/css"
  href="https://cdn.jsdelivr.net/gh/MorFansLab/LiteWebChat_Frame/dist/css/litewebchat_input.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script src="https://cdn.jsdelivr.net/gh/MorFansLab/LiteWebChat_Frame/dist/js/litewebchat_input.min.js"></script>

<!-- 渲染 -->
<script src="https://cdn.jsdelivr.net/gh/MorFansLab/LiteWebChat_Frame/dist/js/litewebchat_render.min.js"></script>

使用 LiteWebChat

仅对话框

所需文件：

样式：litewebchat(.min).css

<div class="lite-chatbox">...</div>

对话框和输入框

所需文件：

样式
- 对话框：litewebchat(.min).css
- 输入框：litewebchat_input(.min).css
脚本
- 输入框：litewebchat_input(.min).js
- 消息渲染：litewebchat_render(.min).js

<!-- 父容器 -->
<div class="lite-chatmaster">
  <!-- 聊天栏 -->
  <div class="lite-chatbox">...</div>

  <!-- 输入框使用的工具栏，包含emoji输入框等组件 -->
  <div class="lite-chattools">...</div>

  <!-- 输入框 -->
  <div class="lite-chatinput">...</div>
</div>

注意：使用输入框时需要手动指定其父容器大小。

Example:

/* 全局，当整个HTML页面都是聊天窗口的时候取消body的margin 和 padding，这样比较好看 */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 手动指定其父容器大小 */
.lite-chatmaster {
  height: 100%;
  width: 100%;
}

可以参考配合一下简易的 JS 消息渲染：

效果和使用参考：带输入框表情选取简单 JS 渲染

参数字段：

messageType：消息类型
- 可选值：
  - 系统提示
    - tipsNormal
    - tipsPrimary
    - tipsSuccess
    - tipsInfo
    - tipsWarning
    - tipsDanger
  - 消息
    - text：普通消息类型
    - raw：不会转义消息类型
html：object 内容
headIcon：头像图片地址
diamond：是否使用方块头像样式
- bool
name：用户名
position：消息位置
- left
- right
htitleType: 头衔类型
- admin
- owner
- 不写则是默认
htitle：头衔标题

使用示例：

<!-- 抽离的聊天信息组件 -->
<script src="https://cdn.jsdelivr.net/gh/MorFansLab/LiteWebChat_Frame/lite-chatbox.min.js"></script>
<script>
  const htmls = [
    {
      messageType: "tipsDanger",
      html: "从我做过的类聊天需求来看，聊天消息要么是纯文本，要么是富文本。所以我抽离出来的消息渲染组件默认了消息是富文本。如果想发送HTML请自行魔改。",
    },
    {
      messageType: "raw",
      headIcon: "./img/A.jpg",
      name: "图片消息2",
      position: "left",
      html: `<img src="./img/img.png"><br>图片带文字是可以的 <del>（废话）</del>`,
    },
    {
      messageType: "text",
      headIcon: "./img/A.jpg",
      name: "全符号测试",
      position: "left",
      html: "。，；？：！‘’“”@ˆ.,;?:!'\"〝〞﹫ˇ",
    },
  ];
  beforeRenderingHTML(htmls, ".lite-chatbox");
</script>
<script>
  document.querySelector(".send").onclick = function () {
    htmls.push({
      messageType: "text",
      headIcon: "./img/B.jpg",
      name: "SuperPaxxs",
      position: "right",
      html: document.querySelector(".chatinput").value,
    });
    document.querySelector(".chatinput").value = "";
    beforeRenderingHTML(htmls, ".lite-chatbox");
  };
</script>

组件

主题

LiteWebChat 目前有 light 和 dark 两款主题。

切换主题方式非常简单，只需添加 html 的属性 itewebchat-theme:

<html lang="en" litewebchat-theme="dark">
  ....
</html>

聊天气泡

组件（类名）	Class 附加类名 / 备注
聊天气泡组件（cmsg）	cleft（左边） / cright（右边）
头像 (headIcon)	默认方形 / radius（圆形头像）
头衔（htitle）	默认成员头衔 / admin（管理头衔） / owner（群主头衔）
名称（name）	为空使用 ‘ ’
聊天内容（content）	-

Example:

<div class="cright cmsg">
  <img
    class="headIcon radius"
    ondragstart="return false;"
    oncontextmenu="return false;"
    src="./img/B.jpg"
  />
  <span class="name">SuperPaxxs</span>
  <span class="content"
    >LiteChat_Frame（轻聊天气泡框架），一个贼简洁
    <del>(简单)</del> 、美观、易用的 HTML 聊天界面框架</span
  >
</div>

系统提示

类名	效果
tips	正常
tips-primary	首要的提示
tips-success	成功提示
tips-info	信息提示
tips-warning	警告提示
tips-danger	错误/危险提示

Example:

<div class="tips">
  <span class="tips-danger">系统消息：左/右边长消息被管理员批判一番……</span>
</div>

<div class="tips">
  <span>系统消息：normal</span>
</div>

输入框

组件（HTML 标签）	是否必备	类名	备注
文字输入框（<textarea>）	是	chatinput	Class：lite-chatinput 内只能存在一个 textarea 标签
发送按钮（<button>）	是	send	Class：lite-chatinput 内只能存在一个发送按钮
分界线（<hr>）	是	boundary	充当输入框和对话框之间的分界线
工具栏按钮（<button>）	否	tool-button（必选）、float-right/float-left（二选一）	用于充当表情按钮等工具栏控件，类名 float-left 和类名 float-right 决定其对齐方式（左对齐/右对齐）。

Example:

<!-- 输入框 -->
<div class="lite-chatinput">
  <!-- 分界线 -->
  <hr class="boundary" />
  <!-- 按钮内部的为svg图片 -->
  <!-- 表情输入框按钮 -->
  <button
    title="表情"
    type="button"
    class="tool-button float-left"
    id="emojiBtn"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
      <path
        d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
      ></path>
      <path
        d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
      ></path>
    </svg>
  </button>
  <!-- 插入图片按钮 -->
  <button
    title="插入图片"
    type="button"
    class="tool-button float-left"
    id="imageBtn"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
      <path
        d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"
      />
    </svg>
  </button>
  <!-- 发送文件按钮 -->
  <button
    title="发送文件"
    type="button"
    class="tool-button float-left"
    id="fileBtn"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
      <!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
      <path
        d="M527.9 224H480v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h400c16.5 0 31.9-8.5 40.7-22.6l79.9-128c20-31.9-3-73.4-40.7-73.4zM48 118c0-3.3 2.7-6 6-6h134.1l64 64H426c3.3 0 6 2.7 6 6v42H152c-16.8 0-32.4 8.8-41.1 23.2L48 351.4zm400 282H72l77.2-128H528z"
      />
    </svg>
  </button>
  <!-- 全屏编辑按钮 -->
  <button
    title="全屏编辑"
    type="button"
    class="tool-button float-right"
    id="editFullScreen"
  >
    <svg svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <path
        d="M17.066667 2.844444C11.377778 2.844444 8.533333 5.688889 5.688889 8.533333 2.844444 11.377778 0 14.222222 0 19.911111v364.088889c0 2.844444 0 5.688889 2.844444 5.688889h5.688889l122.311111-122.311111 164.977778 164.977778c2.844444 2.844444 8.533333 5.688889 11.377778 5.688888 5.688889 0 8.533333-2.844444 11.377778-5.688888l110.933333-110.933334c2.844444-2.844444 5.688889-8.533333 5.688889-11.377778 0-5.688889-2.844444-8.533333-5.688889-11.377777l-159.288889-170.666667L389.688889 8.533333c2.844444-2.844444 2.844444-2.844444 0-5.688889 0-2.844444-2.844444-2.844444-2.844445-2.844444L17.066667 2.844444zM17.066667 1024c-5.688889 0-8.533333-2.844444-11.377778-5.688889-2.844444-2.844444-5.688889-8.533333-5.688889-11.377778V640c0-2.844444 0-5.688889 2.844444-5.688889h5.688889l122.311111 122.311111 164.977778-164.977778c2.844444-2.844444 8.533333-5.688889 11.377778-5.688888 5.688889 0 8.533333 2.844444 11.377778 5.688888l110.933333 110.933334c2.844444 2.844444 5.688889 8.533333 5.688889 11.377778s-2.844444 8.533333-5.688889 11.377777l-164.977778 164.977778 119.466667 119.466667c2.844444 2.844444 2.844444 2.844444 0 5.688889 0 2.844444-2.844444 2.844444-5.688889 2.844444L17.066667 1024zM1006.933333 2.844444c5.688889 0 8.533333 2.844444 11.377778 5.688889 2.844444 2.844444 5.688889 5.688889 5.688889 11.377778v364.088889c0 2.844444 0 5.688889-2.844444 5.688889h-5.688889l-122.311111-122.311111-164.977778 164.977778c-2.844444 2.844444-8.533333 5.688889-11.377778 5.688888-5.688889 0-8.533333-2.844444-11.377778-5.688888l-110.933333-110.933334c-2.844444-2.844444-5.688889-8.533333-5.688889-11.377778 0-5.688889 2.844444-8.533333 5.688889-11.377777l164.977778-164.977778L640 14.222222c-2.844444-2.844444-2.844444-2.844444 0-5.688889-5.688889-8.533333-2.844444-8.533333-2.844444-8.533333l369.777777 2.844444z m0 1021.155556c5.688889 0 8.533333-2.844444 11.377778-5.688889 2.844444-2.844444 5.688889-8.533333 5.688889-11.377778V640c0-2.844444 0-5.688889-2.844444-5.688889h-5.688889l-122.311111 122.311111-164.977778-164.977778c-2.844444-2.844444-8.533333-5.688889-11.377778-5.688888-5.688889 0-8.533333 2.844444-11.377778 5.688888l-110.933333 110.933334c-2.844444 2.844444-5.688889 8.533333-5.688889 11.377778s2.844444 8.533333 5.688889 11.377777l164.977778 164.977778-119.466667 119.466667c-2.844444 2.844444-2.844444 2.844444 0 5.688889 0 2.844444 2.844444 2.844444 5.688889 2.844444l361.244444 5.688889z"
      ></path>
    </svg>
  </button>
  <!-- 退出全屏编辑 -->
  <button
    style="display:none"
    title="退出"
    type="button"
    class="tool-button float-right"
    id="exitFullScreen"
  >
    <svg svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <path
        d="M422.648199 431.157895c5.67313 0 8.509695-2.836565 11.346261-5.67313 2.836565-2.836565 5.67313-8.509695 5.67313-11.346261V51.058172c0-2.836565 0-5.67313-2.836565-5.67313h-5.67313L306.34903 170.193906 141.828255 5.67313C138.99169 2.836565 133.31856 0 130.481994 0c-5.67313 0-11.34626 2.836565-14.182825 5.67313L5.67313 116.299169c-2.836565 2.836565-5.67313 8.509695-5.67313 11.34626 0 5.67313 2.836565 11.34626 5.67313 14.182826L170.193906 303.512465l-119.135734 119.135734c-2.836565 2.836565-2.836565 2.836565 0 5.673131 0 2.836565 2.836565 2.836565 5.67313 2.836565h365.916897z m0 156.01108c5.67313 0 8.509695 2.836565 11.346261 5.67313 2.836565 2.836565 5.67313 8.509695 5.67313 11.346261v365.916897c0 2.836565 0 5.67313-2.836565 5.67313h-5.67313L306.34903 850.969529 141.828255 1015.490305c-2.836565 2.836565-8.509695 5.67313-11.346261 5.67313-5.67313 0-8.509695-2.836565-11.34626-5.67313L8.509695 904.864266c-5.67313-2.836565-8.509695-8.509695-8.509695-11.34626s2.836565-8.509695 5.67313-11.346261L170.193906 717.65097l-119.135734-119.135735c-2.836565-2.836565-2.836565-2.836565 0-5.67313 0-2.836565 2.836565-2.836565 5.67313-2.836565l365.916897-2.836565z m175.867036-156.01108c-5.67313 0-8.509695-2.836565-11.34626-5.67313-2.836565-2.836565-5.67313-8.509695-5.67313-11.346261V51.058172c0-2.836565 0-5.67313 2.836565-5.67313h5.67313L714.814404 170.193906 879.33518 5.67313c2.836565-2.836565 8.509695-5.67313 11.34626-5.67313 5.67313 0 8.509695 2.836565 11.346261 5.67313l110.626039 110.626039c5.67313 2.836565 8.509695 8.509695 8.509695 11.34626 0 5.67313-2.836565 8.509695-5.67313 11.346261L850.969529 303.512465l119.135734 119.135734c2.836565 2.836565 2.836565 2.836565 0 5.673131 0 2.836565-2.836565 2.836565-5.67313 2.836565H598.515235z m0 156.01108c-5.67313 0-8.509695 2.836565-11.34626 5.67313-2.836565 2.836565-5.67313 8.509695-5.67313 11.346261v365.916897c0 2.836565 0 5.67313 2.836565 5.67313h5.67313l121.972299-121.972299 164.520776 164.520776c2.836565 2.836565 8.509695 5.67313 11.34626 5.67313 5.67313 0 8.509695-2.836565 11.346261-5.67313l110.626039-110.626039c2.836565-2.836565 5.67313-8.509695 5.67313-11.34626s-2.836565-8.509695-5.67313-11.346261L850.969529 717.65097l119.135734-119.135735c2.836565-2.836565 2.836565-2.836565 0-5.67313 0-2.836565-2.836565-2.836565-5.67313-2.836565l-365.916898-2.836565z"
      ></path>
    </svg>
  </button>
  <!-- 文字输入框 -->
  <div
    aria-label="input area"
    class="editor chatinput"
    contenteditable="true"
    ref="editor"
  ></div>
  <!-- 发送按钮 -->
  <button class="send">发送</button>
</div>

注意：使用发送文件按钮时需要手动设置用于发送文件的函数。

Example:

<script src="litewebchatinput.min.js"></script>
<script>
  // 设置发送文件
  inputFile({
    // 允许发送文件
    enable: true,
    // 允许在输入框处拖拽发送文件
    enableDrop: true,
    maxImageSize: 1024 * 1024 * 10, // 图片最大10MB，超过了就要用文件发送，默认为-1（无限制），可以不设置
    maxImageNumber: 20, // 输入框内最多同时存在20张图片，默认为-1（无限制），可以不设置
    // 负责发送文件的函数（回调函数），file为传回的文件信息，与使用<input>标签获得的相同
    sendFileFunc: function (file) {
      alert(file.name);
      // console.log(file);
    },
  });
</script>

输入框使用的工具栏

输入框使用的工具栏会在点击工具栏按钮后弹出。

Example（最简）：

<div class="lite-chattools">
  <div style="display:none" id="emojiMart" class="lite-chatbox-tool"></div>
  <div style="display:none" id="toolMusk"></div>
</div>

兼容性

兼容 Firefox 和其他主流浏览器的最新版本。

开发

使用 pnpm 或 npm 或 yarn，以 pnpm 为例：

pnpm i

pnpm run build

Name		Name	Last commit message	Last commit date
Latest commit History 66 Commits
.vscode		.vscode
dist		dist
src		src
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
_config.yml		_config.yml
gulpfile.js		gulpfile.js
lite-chatbox.min.js		lite-chatbox.min.js
litewebchat.min.css		litewebchat.min.css
litewebchatinput.min.css		litewebchatinput.min.css
litewebchatinput.min.js		litewebchatinput.min.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

轻网页聊天框架

使用指南 (指北)

获取 LiteWebChat

1.下载文件

2.直接引用

对话框

输入框

使用 LiteWebChat

仅对话框

对话框和输入框

组件

主题

聊天气泡

系统提示

输入框

输入框使用的工具栏

兼容性

开发

About

Releases

Packages

Contributors 3

Languages

License

MorFansLab/LiteWebChat_Frame

Folders and files

Latest commit

History

Repository files navigation

轻网页聊天框架

使用指南 (指北)

获取 LiteWebChat

1.下载文件

2.直接引用

对话框

输入框

使用 LiteWebChat

仅对话框

对话框和输入框

组件

主题

聊天气泡

系统提示

输入框

输入框使用的工具栏

兼容性

开发

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Packages