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

最新推荐文章于 2024-09-15 15:29:30 发布
最新推荐文章于 2024-09-15 15:29:30 发布
阅读量844 收藏 3
点赞数 15
分类专栏： javascript知识点 js必会知识点 前端基础知识 文章标签： 编辑器 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehaocheng520/article/details/142132588
版权

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

最终使用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>
叶浩成520
关注
专栏目录
vue3 - 详细引入 wangeditor 富文本编辑器及使用教程，安装引入全过程及说明（示例源码开箱即用，快速植入wangeditor 富文本编辑器到vue3项目）
高级前端工程师
07-26 5028
vue3 wangeditor5，vue3富文本编辑器wangeditor使用教程，vue3+ts使用富文本编辑器wangeditor，Vue3如何安装使用wangEditor富文本编辑器，vue3项目使用富文本编辑器-wangeditor，vue3 wangEditor富文本编辑器自定义上传图片，Vue3中使用富文本编辑器之wangEditor，Vue3集成wangEditor富文本插件，wangeditor5在vue3中的全使用过程，vue3+vite3+typescript使用wangEditor编辑
wangEditor:wangEditor —— 轻量级web富文本框
05-11
wangEditor wangEditor 轻量级 web 富文本编辑器，配置方便，使用简单! · · · · 项目介绍 wangEditor 是一款使用 Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费。 兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。 不支持移动端。 当前是 v4 版本。想继续使用 v3 版本看。 安装和使用 NPM npm i wangeditor --save 安装后几行代码即可创建一个编辑器： import E from "wangeditor"; const editor = new E("#div1"); editor.create(); CDN <scri
vue3 ：cdn引入wangEditor
meng_xiaoxiao的博客
06-25 1431
vue3 ：cdn引入wangEditor
.Vue文件挂载CDN，以wangEditor为例
mercurialmush的博客
01-21 1101
.vue文件挂载CDN的方法分享，不同于html的挂载方式。
[javascript] vue项目cdn模式下使用wangEditor
程序员老狼专注开发aigc或客服系统应用
01-16 512
在GOFLY项目的实现过程中，需要使用富文本编辑器，现在使用下wangEditor 很简单，先引入 <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script> 再使用 html中 <div id="welcomeEditor">...
关于wangEditor 5在CDN的使用，vue2的使用以及报错解决
m0_61702149的博客
06-09 3909
关于wangEditor 5vue2的使用，一切就绪之后，我的webpack报错以及报错解决，在cdn的使用
wangeditor 一个好用的编辑器
03-18
- **快速初始化**：通过npm或CDN引入wangeditor库，然后创建一个新的编辑器实例，即可在网页中快速集成编辑器。 - **配置项**：可以通过配置对象设置编辑器的初始状态，如禁用某些功能，设置工具栏按钮等。 - **...
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
多媒体专场+李克——CDN数据化之路(终版)1012.pdf
09-20
综上所述，CDN数据化之路是通过建立一个覆盖数据收集、处理、分析和应用的完整数据链路，从而不断提升CDN服务的性能、可靠性和用户体验。利用先进的数据技术和算法，CDN服务商能够更好地理解和预测用户需求，自动化...
vue3封装wangEditor插件
m0_62857167的博客
05-26 1477
vue3、富文本框、wangEditor
【vue开发基础】之wangeditor富文本编辑器
坚持不懈 一往无前
07-08 1502
【vue开发基础】之wangeditor富文本编辑器
wangEditor 一款非常牛啤的富文本编辑器
weixin_41811536的博客
04-09 396
wangEditor官方文档 最近用jQuery做一个小项目，需要用到富文本编辑器，找了一些但总是会出现各种小问题，直到我发现了wangEditor… 这款编辑器界面清爽、功能强悍，写起来简单易用、代码简洁，而且是开源免费的。 上代码： 生成编辑器 CDN引入wangEditor.min.js <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
FCKEditor - 支持word上传的富文本编辑器
Mr_Zang666的博客
07-18 468
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
fckeditor编辑器在Chrome浏览器下编辑时多出空格解决方法
大剑师兰特的GIS世界
12-16 328
dedecms网站后台采用fckeditor编辑器，使用谷歌Chrome浏览器重新编辑文章的时候，下面会多出很多空格，影响编辑效率，在做资料上传的时候发现内容前面都会有一个空格，网站前台预览的时候文章前面就多出一个空格，影响美观。
【渗透测试】--- FCKeditor文本编辑器漏洞
热门推荐
qq_43168364的博客
12-25 1万+
一、FCKeditor编辑器漏洞 FCKeditor编辑器是一款强大的所见即所得文本编辑器，现在已经更名为：CKEditor fckeditor的常见敏感目录（FCK有时要小写） (1) 查看版本信息 /FCKeditor/editor/dialog/fck_about.html /FCKeditor/_whatsnew.html (2) 默认上传页面 /FCKeditor/editor/filemanager/browser/default/browser.html /FCKeditor/edito
FCKEDITOR编辑器复制粘贴图片上传
weixin_52041354的博客
04-07 619
编辑器是fckeditor，有点旧了，为fckeditor编辑器增加粘贴Word图片的功能，支持快捷键操作（Ctrl+V），粘贴后word图片自动上传到web服务器中，自动返回图片和文字HTML，自动将图片和文字HTML添加到编辑器中，自动保留文字样式，文字大小，字体颜色，用户可以直接看到粘贴后的效果。支持word粘贴，word内容粘贴,word图文粘贴,word图片粘贴，粘贴后图片能够自动上传到服务器中，然后将图片和内容HTML添加到编辑器中，上传接口地址能够自定义。–组件初始化的目标容器–>
FCKeditor：Web富文本编辑器的实现与应用
最新发布
weixin_28746457的博客
09-15 1561
本文还有配套的精品资源，点击获取 简介：FCKeditor是一款开源的Web富文本编辑器，具备多平台兼容性、丰富编辑功能、自定义配置选项、语言支持和插件扩展性等特性。提供初始化、实例化编辑器和保存内容的具体使用方法，并附有示例代码。自CKEditor版本推出后，FCKeditor已演变成更为现代的编辑器，但其作为学习工具的价值依然存在。 1. Web富文本编辑器概...
fckeditor 使用大全（持续更新）
研究Android技术,以及和Android相关的任何盈利模式
11-16 250
由于公司最近要使用fckeditor，借此机会也将fckeditor做一下总结：（逐渐补全） 1.fckeditor的资源： FCKeditor添加自定义按钮 FCKeditor和rails的结合，不使用rails插件 2.使用rails的plugin。 rails里边有个plugin可以使用fckeditor.昨天还没见更新，今天早上看见版本更新了，太高兴...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶浩成520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值