广州有没有专业人士一起打造优秀网站设计?

摘要:有没有人一起做网站,广州优秀网站设计,wordpress一栏多图,wordpress怎样设置留言昨天同事那边有个需求,就是要实现聊天功能,需要用到一个富文本编辑器&
有没有人一起做网站,广州优秀网站设计,wordpress一栏多图,wordpress怎样设置留言昨天同事那边有个需求#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, () {// 隐藏蒙层}
阅读全文