昨天同事那边有个需求,就是要实现聊天功能,需要用到一个富文本编辑器,参考如下:
上面的这个效果图是博客园的评论输入框
最终使用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>