可视化编辑器，解决传统文章编辑器编辑及发布页面不一致的痛点，实时同步后台编辑与前端效果，大幅度提升内容管理效率，实现真正的所见即所得—— What You See Is What You Get.
简介
Visual Editor
Visual Editor 是一个可视化编辑器的前端框架，可以添加文字、图片、视频（腾讯视频），支持自定义模块、样式。
真正实现 “所见即所得” ，后台编辑与前端呈现效果保持高度一致。让用户能够实时编辑改变排版布局，且界面功能规划简单明了、载入速度快，提供用户撰写的最佳沉浸体验，降低用户反复确认修改的成本，提高在复杂的文章后台编辑界面中的操作效率。
背景
我们在使用以前的文章编辑器时，发现功能混杂、流程繁琐。像表单一样的编辑界面让用户体验极差，反复修改预览操作极大的降低编辑效率。所以，准备从根本上解决问题，在直观、美观、高效、简洁各方面提升用户体验和操作效率，实现真正的所见即所得的可视化编辑器。
功能介绍
我们从
传统编辑器
和
可视化编辑器
对比来介绍：
丑 vs 美观
抽象 vs 直观
传统编辑器在修改编辑内容时，需要重复N次编辑预览的操作。可视化编辑器，编辑界面与预览界面保持高度一致，编辑即预览，直观的呈现前端界面效果。
下图为操作步骤的简化效果
下图为操作编辑界面的对比展示，左图为传统编辑器界面，右图为可视化编辑器界面
低效 vs 高效
传统编辑器工具栏置顶，且功能多余，类别混杂，如下所示：
可视化编辑器提取核心功能模块，分为
本文编辑
和
添加模块
两大类，以
伴随
的方式展示工具栏：
文本编辑工具栏：
添加模块工具栏：
复杂 vs 简洁
传统编辑器添加视频步骤繁琐，学习成本高
Visual Editor 添加视频
一步到位
，只需要上图中第一步，复制粘贴回车就搞定：
其他功能
Visual Editor 还有其他功能，包括插入图片、插入代码、选择文章分类、填写文章其他信息等。同样也是通过伴随工具栏添加，如下：
添加图片：
添加代码：
选择分类：
可扩展API
Visual Editor 开放 API，提供项目复用。支持自定义模块、自定义工具栏、定制化前端界面样式、特殊属性设置、分类选项定制化、批量上传图片接口等。
自定义模块 & 样式
可配置 module 参数，定制化可添加的模块（不限于图片视频等），同样还可以传入 class 来重写每一个 module 的样式：
moduleTpl: {
title: `
`,
image: `
`,
video: `
`,
code: `
`
}
自定义工具栏
可配置 modulebar 参数，定制工具栏的内容及样式，也可以任意添加多个可添加的 module icon：
modulebar: {
/* Editor 是否支持显示添加模块工具栏 */
withModuleBar: true,
modulebarId: 'modulebar',
classList: ['modulebar'],
/* 用于每一个icon提供给js操作的class，对应下面moduleIcons生成的元素中 */
moduleIconsCommonClassForJS: 'js-visual-module-icon',
/* 添加模块的 + icon，用于控制展开收起具体的模块icon */
addIcon: {
classList: ['visual-add-icon'],
addIconClassForJS:'js-visual-add-icon',
actionClass: 'module-icons',
actionId: 'module-icons',
name: 'Add Button',
contentFA: ''
},
moduleIcons:[
/* 具体每一个模块对应的icon元素，包括class，title，moduleType，icon innerhtml */
{
name: 'titlewithline',
classList: ['module-icon'],
title:'Add Title With Line',
/* moduleType 的值需和 【moduleTpl】 模块的 key 一一对应，详见第七点 */
moduleType: 'titlewithline',
control: false,
contentFA: ''
},
{
name: 'title',
fontsize: '28px',
classList: ['module-icon'],
title: 'Add Title',
moduleType: 'title',
control: false,
contentFA: ''
},
{
name: 'image',
classList: ['module-icon'],
title:'Add Image',
moduleType: 'image',
control: true,
contentFA: ''
},
{
name: 'video',
classList: ['module-icon'],
title:'Add Video',
moduleType: 'videolink',
control: false,
contentFA: ''
},
{
name: 'code',
classList: ['module-icon'],
title:'Add Code',
moduleType: 'code',
control: false,
contentFA: ''
}
]
}
});
定制化页面样式
Visual Editor 提供的所有 API 均有默认样式，但是所有的接口可以重新配置参数，整个页面都可以重写样式，直接替换元素的 class 以及 css 文件即可：
