切图网Qietu.com 前端项目后台网页中遇到的，使用wangEditor ，说起网页富文本编辑器 国内主流的方案是百度的ueEditor但是目前已经不怎么维护了，所以使用其他还在维护的富文本编辑器可能不乏是一个更好的选择， 另外，国外也有一款主流并且非常强大的编辑器插件fckeditor，现在叫ckEditor，它还有衍生产品ckFinder 在线的文件管理编辑插件，我们有用到过 也是非常的好用。

页面中调用多个wangEditor 以及 validate.js验证必填 亲测可用 代码片段：

一个页面中引用多个wangEditor代码片段

<!-- 引入 wangEditor 5+ -->
<script src="resources/wangeditor/index.min.js"></script>
<link href="resources/wangeditor/css/style.css" rel="stylesheet">
<script>
// 从 wangEditor 中导入需要的模块
const { createEditor, createToolbar } = window.wangEditor;

// 存储所有编辑器和工具栏实例
const editorInstances = {};

/**
* 初始化编辑器函数
* @param {string} id - 编辑器唯一标识
* @param {Object} options - 配置选项
*/
function initEditor(id, options = {}) {
// 编辑器配置
const editorConfig = {
placeholder: options.placeholder || '请输入内容...',
onChange(editor) {
const html = editor.getHtml();
console.log(`编辑器 ${id} 内容变化:`, html);
},
// 设置编辑器高度（5+版本通过容器style或配置height均可）
height: options.height || 300,
// 其他配置项
...options.editorConfig
};

// 创建编辑器实例
const editor = createEditor({
selector: `#${id}`,
html: options.initialHtml || '',
config: editorConfig,
mode: options.mode || 'default' // 'default' 或 'simple'
});

// 工具栏配置
const toolbarConfig = {
...options.toolbarConfig
};

// 创建工具栏实例
const toolbar = createToolbar({
editor,
selector: `#toolbar${id.replace('editor', '')}`,
config: toolbarConfig,
mode: options.mode || 'default'
});

// 存储实例
editorInstances[id] = { editor, toolbar };

return { editor, toolbar };
}

// 初始化第一个编辑器 - 完整功能
initEditor('editor1', {
placeholder: '请输入文章正文...',
height: 400,
initialHtml: '<div><span style=\'font-size:12px;color:red;\'>2欢迎使用 wangEditor 5+</span><p>这是一个功能完整的富文本编辑器</p></div>',
mode: 'default',

});

// 初始化第二个编辑器 - 精简模式
initEditor('editor2', {
placeholder: '请输入评论内容...',
height: 300,
initialHtml: '',
mode: 'simple',
toolbarConfig: {
// 自定义工具栏选项
excludeKeys: ['uploadImage', 'insertVideo', 'code']
}
});

// 获取编辑器内容
function getContent(editorId) {
const instance = editorInstances[editorId];
if (instance) {
const html = instance.editor.getHtml();
const text = instance.editor.getText();

const displayElem = document.getElementById('contentDisplay');
displayElem.innerHTML = `编辑器 ${editorId} 的 HTML 内容:\n${html}\n\n` +
`编辑器 ${editorId} 的文本内容:\n${text}`;

displayElem.scrollTop = 0;
displayElem.parentElement.scrollIntoView({ behavior: 'smooth' });
}
}
</script>

======================

wangEditor 在validate.js中验证必填方法代码片段

submitHandler: function (form) {
//

const instance1 = editorInstances['editor1'];
if(instance1){
const text1 = instance1.editor.getText();
console.log(text1.trim().length);
if(text1.trim().length === 0){

$('#error1').show();
$('html,body').animate({scrollTop:$('#error1').offset().top-500});
return false;
}
else{

$('#error1').hide();
}

}
const instance2 = editorInstances['editor2'];
if(instance2){
const text2 = instance2.editor.getText();

if(text2==''){
$('#error2').show();
$('html,body').animate({scrollTop:$('#error2').offset().top-500});
return false;
}
else{
$('#error2').hide();
}

}

}

标签：ckeditor, ckFinder, fckeditor, ueEditor, wangEditor, 富文本编辑器, 编辑器