What You See Is What You Get

可视化编辑器,解决传统文章编辑器编辑及发布页面不一致的痛点,实时同步后台编辑与前端效果,大幅度提升内容管理效率,实现真正的所见即所得—— 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: `<div class="_public_title medium-editor-placeholder-relative" data-placeholder="Section Title"></div>`,
      image: `<div class="_public_pic block-item block-shadow-item"></div><p><br></p>`,
      video: `<div class="_public_video block-item block-shadow-item"></div><p><br></p>`,
      code: `<div class="_public_code medium-editor-placeholder-relative" data-placeholder="Paste your code right here"></div><p><br></p>`
            }

自定义工具栏

可配置 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: '<span class="add-icon" title="Add Module"></span>'
      },
      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: '<span class="add-titlewithline-icon"></span>'
          },
          {
              name: 'title',
              fontsize: '28px',
              classList: ['module-icon'],
              title: 'Add Title',
              moduleType: 'title',
              control: false, 
              contentFA: '<span class="add-title-icon"></span>'
          },
          {
              name: 'image',
              classList: ['module-icon'],
              title:'Add Image',
              moduleType: 'image',
              control: true,
              contentFA: '<span class="add-image-icon"></span>'
          },
          {
              name: 'video',
              classList: ['module-icon'],
              title:'Add Video',
              moduleType: 'videolink',
              control: false,
              contentFA: '<span class="add-video-icon"></span>'
          },
          {
              name: 'code',
              classList: ['module-icon'],
              title:'Add Code',
              moduleType: 'code',
              control: false,
              contentFA: '<span class="add-code-icon"></span>'
          }
      ]
    }
});

定制化页面样式

Visual Editor 提供的所有 API 均有默认样式,但是所有的接口可以重新配置参数,整个页面都可以重写样式,直接替换元素的 class 以及 css 文件即可:

<link rel="stylesheet" href="css/medium-editor.css"> <!--默认文字编辑工具栏样式-->
<link rel="stylesheet" href="css/themes/tim.css"> <!--文字编辑工具栏样式可更换主题-->
<link rel="stylesheet" href="css/visualize.css"> <!--默认模块工具栏样式-->
<link rel="stylesheet" href="css/detail.css"> <!--页面定制化样式,主要通过【moduleTpl】模块传入的元素及样式决定-->

特殊属性设置

· 元素加上 data-islocked = "true"  属性可锁定元素,不允许删除

· 元素加上 data-disableenter = "true" 属性可锁定元素,不允许换行

· 元素加上 data-placeholder =  "Paste a Tencent Video link, and press Enter"  属性可现实提示文案

· 元素加上 js-visual-editor-enter-copy 这个 class,并配合 data-isentercopy="true"  data-islocked="true"  data-disableenter="false",使用,则可实现为文章大标题定制的换行,有且仅可换两行,实现标题太长不方便一行展示的需求。

特殊属性设置

· upload,批量上传图片接口

· category,文章分类接口,同样可定制化传入多个分类

· renderbar,元素布局接口,目前仅支持更换图片,后续将继续开发元素对齐方式等布局工具栏

P.S. category,renderbar 两个 API 同样支持定制化元素及样式。

支持实例化多个Editor

Visual Editor 支持同一个页面同时初始化多个 Editor,主要用于页面由两个单独模块组成,可通过配置参数定制化设置其中某一个 Editor 是否需要 modulebar 之类的的特殊需求。

总结

Visual Editor 实时同步后台编辑与前端呈现效果,创造直观、统一的撰写体验,建立更具有规范性、更完整的内容管理架构。同时,也希望此创新技术的实现结果,能为相关项目所复用,共同提升内容管理系统的可用性及效率,营造更优质的后台编辑环境。


感谢阅读,本文由 腾讯ISUX 版权所有,转载请注明出处,违者必究,谢谢您的合作。注明出处格式:

文章来自公众号:腾讯ISUX 

(https://isux.tencent.com/articles/visual-editor.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2018-01-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

自然框架,拆分后的项目关系

  拆分了一下自然框架,似乎又绕回去了。以前是多个项目分开放的,有人说太分散了,还得一个个下载,麻烦。于是就做了一个解决方案,把项目都放在了一起。   现在呢,...

24250
来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

10520
来自专栏移动开发之家

从Android到React Native开发(一、入门)

大家好┏ (ω)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。 关于React N...

10220
来自专栏糊一笑

微信小程序初探【类微信UI聊天简单实现】

微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的...

64150
来自专栏君赏技术博客

学习UISCREENEDGEPANGESTURERECOGNIZER手势

最近几天一直搞首页的框架,看了一些轮子,发现和我们的首页不一样。但是却发现UIScreenEdgePanGestureRecognizer这个类,就研究一下。

13120
来自专栏PHP在线

最新HTML5学习路线整合

HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,一方面提升了用户体验,另一方面HTML5技术跨平台,适配多...

24340
来自专栏Python数据科学

给爬虫爱好者的福利 SelectGadget

相信爬虫的爱好者们都经历过这样一个爬虫前期的准备过程,那就是用浏览器的审查元素进行爬取目标的定位。每次我们都要浪费部分时间去寻找定位点和xpath,这样既不很方...

11210
来自专栏小特工作室

基于JQuery EasyUI的WebForm控件封装(含源码)

      做WebForm软件的朋友们,对于JQuery EasyUI类库肯定不会陌生,它是基于JQuery类库编写的,据说是国人开发的,真是神人啊.使用此控...

282100
来自专栏Android机动车

大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

Airbnb出了移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/i...

38910
来自专栏葡萄城控件技术团队

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界...

23450

扫码关注云+社区

领取腾讯云代金券