HTML——实现富文本编辑器wangEditor的使用
<!DOCTYPE html>
<html>
<head>
<title>WangEditor 示例</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/wangeditor/dist/wangEditor.min.js"></script>
</head>
<body>
<div id="editor" style="height: 400px;"></div>
<script>
// 初始化编辑器
var editor = new wangEditor('editor');
// 配置编辑器参数
editor.config.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 图片
'table', // 表格
'video', // 视频
'code', // 代码
'undo', // 撤销
'redo' // 重做
];
editor.config.uploadImgServer = '你的图片上传服务器地址';
editor.config.uploadFileName = '你指定的文件参数名';
// 图片上传的参数名称
editor.config.uploadImgParams = {
// 用户相关信息可以自行添加
};
// 将编辑器的配置应用到编辑器上
editor.create();
</script>
</body>
</html>这段代码展示了如何在HTML页面中引入并初始化wangEditor富文本编辑器。同时，通过配置菜单项和上传图片的服务器地址，可以定制编辑器的功能。在实际使用时，需要替换相应的服务器地址和参数以适应自己的后端服务。
评论已关闭