wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升

news2024/11/24 17:35:18

昨天同事那边有个需求,就是要实现聊天功能,需要用到一个富文本编辑器,参考如下:
在这里插入图片描述
上面的这个效果图是博客园的评论输入框

最终使用wangEditor编辑器实现的效果如下:

在这里插入图片描述
只保留了个别的菜单:

默认模式的wangEditor编辑器如下:
在这里插入图片描述
下面直接上代码:

解决步骤1:cdn引入

head头部标签引入css

<link
      href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
      rel="stylesheet"
    />

script引入js

 <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

解决步骤2:其余css配置

<style>
      #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
      }
      #toolbar-container {
        border-bottom: 1px solid #ccc;
      }
      #editor-container {
        height: 500px;
      }
    </style>

解决步骤3:html代码

 <div id="editor-content-textarea"></div>
    <button id="btn-set-html">设置html</button>
    <div id="editor—wrapper" style="width: 900px">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>

解决步骤4:script代码

<script>
      const { createEditor, createToolbar } = window.wangEditor;

      const editorConfig = {
        placeholder: '请输入内容...',
        // maxLength:2000,//设置最大长度
        MENU_CONF: {},
        onChange(editor) {
          const html = editor.getHtml();
          console.log('editor content', html);
          // 也可以同步到 <textarea>
        },
      };

      const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple', // or 'simple'
      });

      const toolbarConfig = {
        excludeKeys: [
          'blockquote',
          'bgColor',
          // 'headerSelect',
          'italic',
          'group-more-style', // 排除菜单组,写菜单组 key 的值即可
          'bulletedList', //无序列表
          'numberedList', //有序列表
          'todo', //待办
          'emotion', //表情
          'insertTable', //表格
          'codeBlock', //代码块
          'group-video', //视频
          'divider', //分割线
          'fullScreen', //全屏
          // 'insertLink',//插入链接
          'group-justify', //对齐方式
          'group-indent', //缩进
          'fontSize', //字体大小
          'fontFamily', //字体
          'lineHeight', //行高
          'underline', //下划线
          'color', //颜色
          'undo', //撤销
          'redo', //重做
        ],
      };
      toolbarConfig.modalAppendToBody = true;

      // 创建 toolbar 和 editor

      // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
      editor.on('modalOrPanelShow', (modalOrPanel) => {
        if (modalOrPanel.type !== 'modal') return;
        const { $elem } = modalOrPanel; // modal element

        // 设置 modal 样式(定位、z-index)
        // 显示蒙层
      });
      editor.on('modalOrPanelHide', () => {
        // 隐藏蒙层
      });
      const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
      });
      editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/upload-image',
        fieldName: 'custom-field-name',
        // 继续写其他配置...
        customInsert(res, insertFn) {
          console.log(res);
          // JS 语法
          // res 即服务端的返回结果
          // 从 res 中找到 url alt href ,然后插入图片
          //   "url": "xxx", // 图片 src ,必须
          // "alt": "yyy", // 图片描述文字,非必须
          // "href": "zzz" // 图片的链接,非必须
          insertFn(url, alt, href);
        },
        //【注意】不需要修改的不用写,wangEditor 会去 merge 当前其他配置
      };
});

如果要实现回显,则需要通过下面的代码

// textarea 初始化值
      const textarea = document.getElementById('editor-content-textarea');
      textarea.value =
        '<p>wangEditor 只识别 editor.getHtml() 生成的 html 格式,不可以随意自定义 html 代码(html 格式太灵活了,不会全部兼容)</p>\n<p>wangEditor can only understand the HTML format from editor.getHtml() , but not all HTML formats.</p>\n<p><br></p>';

      // Set HTML
      document.getElementById('btn-set-html').addEventListener('click', () => {
        if (editor.isDisabled()) editor.enable();
        if (!editor.isFocused()) editor.focus();

        editor.select([]);
        editor.deleteFragment();

        window.wangEditor.SlateTransforms.setNodes(
          editor,
          { type: 'paragraph' },
          { mode: 'highest' }
        );
        editor.dangerouslyInsertHtml(textarea.value);

完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>富文本编辑器</title>
    <link
      href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
      rel="stylesheet"
    />
    <style>
      #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
      }
      #toolbar-container {
        border-bottom: 1px solid #ccc;
      }
      #editor-container {
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="editor-content-textarea"></div>
    <button id="btn-set-html">设置html</button>
    <div id="editor—wrapper" style="width: 900px">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script>
      const { createEditor, createToolbar } = window.wangEditor;

      const editorConfig = {
        placeholder: '请输入内容...',
        // maxLength:2000,//设置最大长度
        MENU_CONF: {},
        onChange(editor) {
          const html = editor.getHtml();
          console.log('editor content', html);
          // 也可以同步到 <textarea>
        },
      };

      const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple', // or 'simple'
      });

      const toolbarConfig = {
        excludeKeys: [
          'blockquote',
          'bgColor',
          // 'headerSelect',
          'italic',
          'group-more-style', // 排除菜单组,写菜单组 key 的值即可
          'bulletedList', //无序列表
          'numberedList', //有序列表
          'todo', //待办
          'emotion', //表情
          'insertTable', //表格
          'codeBlock', //代码块
          'group-video', //视频
          'divider', //分割线
          'fullScreen', //全屏
          // 'insertLink',//插入链接
          'group-justify', //对齐方式
          'group-indent', //缩进
          'fontSize', //字体大小
          'fontFamily', //字体
          'lineHeight', //行高
          'underline', //下划线
          'color', //颜色
          'undo', //撤销
          'redo', //重做
        ],
      };
      toolbarConfig.modalAppendToBody = true;

      // 创建 toolbar 和 editor

      // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
      editor.on('modalOrPanelShow', (modalOrPanel) => {
        if (modalOrPanel.type !== 'modal') return;
        const { $elem } = modalOrPanel; // modal element

        // 设置 modal 样式(定位、z-index)
        // 显示蒙层
      });
      editor.on('modalOrPanelHide', () => {
        // 隐藏蒙层
      });
      const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
      });
      editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/upload-image',
        fieldName: 'custom-field-name',
        // 继续写其他配置...
        customInsert(res, insertFn) {
          console.log(res);
          // JS 语法
          // res 即服务端的返回结果
          // 从 res 中找到 url alt href ,然后插入图片
          //   "url": "xxx", // 图片 src ,必须
          // "alt": "yyy", // 图片描述文字,非必须
          // "href": "zzz" // 图片的链接,非必须
          insertFn(url, alt, href);
        },
        //【注意】不需要修改的不用写,wangEditor 会去 merge 当前其他配置
      };
      // textarea 初始化值
      const textarea = document.getElementById('editor-content-textarea');
      textarea.value =
        '<p>wangEditor 只识别 editor.getHtml() 生成的 html 格式,不可以随意自定义 html 代码(html 格式太灵活了,不会全部兼容)</p>\n<p>wangEditor can only understand the HTML format from editor.getHtml() , but not all HTML formats.</p>\n<p><br></p>';

      // Set HTML
      document.getElementById('btn-set-html').addEventListener('click', () => {
        if (editor.isDisabled()) editor.enable();
        if (!editor.isFocused()) editor.focus();

        editor.select([]);
        editor.deleteFragment();

        window.wangEditor.SlateTransforms.setNodes(
          editor,
          { type: 'paragraph' },
          { mode: 'highest' }
        );
        editor.dangerouslyInsertHtml(textarea.value);
      });
    </script>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2127616.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

/bin/bash的作用

1、为啥使用不了很多命令&#xff1f; 我刚进入一个新系统&#xff1a; 我当时蒙蔽了&#xff0c;这是啥意思&#xff0c;为啥没命令? 原因是&#xff1a;当时进入的shell并没有初始化这些路径环境&#xff0c;所以正确的方法是&#xff1a; 2、/bin/bash运行的过程中执行…

Android12_13左上角状态栏数字时间显示右移动

文章目录 问题场景解决问题 一、基础资料二、代码追踪三、解决方案布局的角度解决更改paddingStart 的默认值设置marginLeft 值 硬编码的角度解决 问题场景 1&#xff09;早期一般屏幕都是方形的&#xff0c;但是曲面屏&#xff0c;比如&#xff1a;好多车机Android产品、魔镜…

9月11号作业

头文件 #include <cmath> #include <QApplication> #include <QMainWindow> #include <QLabel> #include <QTimer> #include <QVBoxLayout> #include <QRandomGenerator> #include <QTimerEvent> #include <QTextT…

如何在 Ubuntu 系统上部署 Laravel 项目 ?

到目前为止&#xff0c;Laravel 是 PHP 开发人员构建 api 和 web 应用程序的首选。如果你是新手的话&#xff0c;将 Laravel 应用程序部署到线上服务器上可能有点棘手。 在本指南中&#xff0c;我们将向您展示在 Ubuntu 系统中部署 Laravel 应用程序的全过程。 Step 1: Updat…

SprinBoot+Vue教务管理系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

【深度学习】搞懂卷积神经网络(一)

卷积神经网络是一种具有局部连接&#xff0c;权重共享等特性的深层前馈神经网络。一般是由卷积层&#xff0c;池化层&#xff0c;全连接层交叉堆叠而成&#xff0c;使用反向传播算法进行训练。卷积神经网络具有一定程度上的平移&#xff0c;缩放和旋转不变性&#xff0c;较前馈…

【目标检测数据集】工具扳手数据集1000张VOC+YOLO格式

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1003 标注数量(xml文件个数)&#xff1a;1003 标注数量(txt文件个数)&#xff1a;1003 标注…

Mac M芯片上安装统信UOS 1070arm64虚拟机

原文链接&#xff1a;Mac M芯片上安装统信UOS 1070 arm64虚拟机 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于如何在苹果M系列芯片的Mac电脑上&#xff0c;通过VMware安装ARM64版统信UOS 1070桌面操作系统的文章。随着苹果M1和M2芯片的推出&#xff0c;越来越…

MATLAB中swapbytes函数用法

目录 语法 说明 示例 交换标量的字节顺序 交换向量的字节顺序 交换三维数组的字节顺序 swapbytes函数的功能交换字节顺序。 语法 Y swapbytes(X) 说明 Y swapbytes(X) 将数组 X 中每个元素的字节排序从 little endian 转换为 big endian&#xff08;或相反&#xff…

解决:Vue3 - defineProps 设置默认值报错问题

目录 1&#xff0c;问题2&#xff0c;分析2.1&#xff0c;按报错提示信息测试2.2&#xff0c;测试 vue-i18n 3&#xff0c;解决 1&#xff0c;问题 使用 defineProps 指定默认值时报错&#xff0c;代码如下&#xff1a; <template><input type"text" :pla…

1分钟从出差申请到自动入账,用友BIP超级版超级快!

在当今的商业战场&#xff0c;时间就是金钱&#xff0c;效率决定成败。对于频繁出差的商务精英而言&#xff0c;繁琐的差旅申请与报销流程无疑是巨大的时间浪费。现在&#xff0c;用友BIP超级版商旅费控一体化解决方案&#xff0c;将彻底改变这一现状&#xff0c;操作仅需1分钟…

【无人机设计与控制】固定翼四旋翼无人机UAV俯仰姿态飞行模糊自整定PID控制Simulink建模

摘要 本研究设计了一种基于模糊自整定PID控制的固定翼四旋翼无人机俯仰姿态控制系统。利用Simulink建立了无人机俯仰控制系统模型&#xff0c;通过模糊控制器自适应调节PID参数&#xff0c;实现了对无人机俯仰角度的精确控制。实验结果表明&#xff0c;该控制策略在不同飞行状…

机器学习-特征工层

机器学习-特征工层 仅个人笔记使用&#xff0c;感谢点赞关注 目前仅专注于 NLP 大模型 机器学习和前后端的技术学习和分享 感谢大家的关注与支持&#xff01;

【 html+css 绚丽Loading 】000047 玄武流转盘

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽Loading&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495…

有关 Element-ui 的一些思考

本篇文章是基于 element-ui 的 主题样式修改 曾经为了修改组件风格,一个项目用了上百个样式穿透,后来才发现定制一个主题就够了! 第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色 第二步,下载主题 第三步,用下载的css文件替换掉默认的css文件

得物超级品质保障中心,助力电商品质保障迈向新高度

近期记者走进国内知名潮流电商平台——得物App的超级品质保障中心。该中心位于上海市嘉定区&#xff0c;总建筑面积达到约12万平方米&#xff0c;是集查验鉴别、鉴别研究、质量管理、仓储流转等功能于一体的综合性服务设施&#xff0c;全面覆盖了服装、配饰、奢侈品等多个业务品…

关于java学习基础路线的分享【javaSE】

成长路上不孤单&#x1f60a;【14后&#xff0c;C爱好者&#xff0c;持续分享所学&#xff0c;如有需要欢迎收藏转发&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#xff01;&#xff01;&#xff01;&#xff01;&#xff…

计算一批集合中包含指定成员的次数

有一个用Excel表格表示的赛事分组图&#xff0c;从C1:V13&#xff0c;每6列表示四个选手的一桌比赛&#xff0c;1-16表示16位选手的编号。 ABCDEFGHIJKLMNOPQRSTUV118141112214313101516652231579111315246810123311814153691213165214449131548121637101426553211161471015161…

fmql之ubuntu移植

官方资料&#xff1a;ubuntu18的压缩包 目的&#xff1a;放到SD卡中启动ubuntu&#xff08;官方是放在emmc中&#xff09; 教程&#xff1a;99_FMQL45_大黄蜂开发板跑ubuntu18.04.docx 所需文件 其中&#xff0c;format_emmc_ext4.txt对emmc的分区是512M&#xff08;放上述文…

基于STM32C8T6的CubeMX:HAL库点亮LED

三个可能的问题和解决方法&#xff1a; 大家完成之后回来看&#xff0c;每一种改错误都是一种成长&#xff0c;不要畏惧&#xff0c;要快乐&#xff0c;积极面对&#xff0c;要耐心对待 STMCuBeMX新建项目的两种匪夷所思的问题https://mp.csdn.net/mp_blog/creation/editor/1…