成都大型网站建设,网易企业邮箱和网易邮箱的区别,餐饮品牌设计公司哪家好,文明网站建设情况报告昨天同事那边有个需求#xff0c;就是要实现聊天功能#xff0c;需要用到一个富文本编辑器#xff0c;参考如下#xff1a; 上面的这个效果图是博客园的评论输入框
最终使用wangEditor编辑器实现的效果如下#xff1a; 只保留了个别的菜单#xff1a;
默认模式的wangE…昨天同事那边有个需求就是要实现聊天功能需要用到一个富文本编辑器参考如下 上面的这个效果图是博客园的评论输入框
最终使用wangEditor编辑器实现的效果如下 只保留了个别的菜单
默认模式的wangEditor编辑器如下 下面直接上代码
解决步骤1cdn引入
head头部标签引入css
linkhrefhttps://unpkg.com/wangeditor/editorlatest/dist/css/style.cssrelstylesheet/script引入js script srchttps://unpkg.com/wangeditor/editorlatest/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解决步骤3html代码 div ideditor-content-textarea/divbutton idbtn-set-html设置html/buttondiv ideditor—wrapper stylewidth: 900pxdiv idtoolbar-container!-- 工具栏 --/divdiv ideditor-container!-- 编辑器 --/div/div解决步骤4script代码
scriptconst { 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: pbr/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 pwangEditor 只识别 editor.getHtml() 生成的 html 格式不可以随意自定义 html 代码html 格式太灵活了不会全部兼容/p\npwangEditor can only understand the HTML format from editor.getHtml() , but not all HTML formats./p\npbr/p;// Set HTMLdocument.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 xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-equivcontent-type contenttext/html;charsetutf-8 /title富文本编辑器/titlelinkhrefhttps://unpkg.com/wangeditor/editorlatest/dist/css/style.cssrelstylesheet/style#editor—wrapper {border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}/style/headbodydiv ideditor-content-textarea/divbutton idbtn-set-html设置html/buttondiv ideditor—wrapper stylewidth: 900pxdiv idtoolbar-container!-- 工具栏 --/divdiv ideditor-container!-- 编辑器 --/div/divscript srchttps://unpkg.com/wangeditor/editorlatest/dist/index.js/scriptscriptconst { 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: pbr/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 pwangEditor 只识别 editor.getHtml() 生成的 html 格式不可以随意自定义 html 代码html 格式太灵活了不会全部兼容/p\npwangEditor can only understand the HTML format from editor.getHtml() , but not all HTML formats./p\npbr/p;// Set HTMLdocument.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
