ueditor编辑器发布文章后图片style_预览、保存和发布:编辑器的设计者如何设计这些功能...

预览、保存和发布,是在进行一些图文编辑时会涉及到的基础功能,身为这些编辑器的设计者,该如何对这些功能进行考量,如何在设计时最大限度对使用者提供便利,笔者结合自己的工作经历给出了解答。

cab3ef40f24e11465125bf039792bf91.png

预览、保存和发布是在设计编辑器类产品中会遇到的基础功能点,笔者分别负责过H5编辑器、表单编辑器、Workflow编辑器的产品设计。文本将进一步结合图片编辑器、文字编辑器的分析,在此将自己的思考进行总结,主要涉及到的是实际功能设计时需要注意的部分点,希望与大家讨论学习。

一、预览

预览功能一般满足的是编辑者对编辑内容进行确认的需求,当无法在编辑中实现“所见即所得”的效果时,往往会通过预览来帮助确认实际效果符合其心理预期,在设计时需要考虑以下要点。

1. 是否需要预览?

需要思考是否为用户提供了“所见即所得”的效果,“所见”包含的意义不单指视觉层面的文章排版、图片样式,比如对于H5还意味着实际的交互体验,对于Workflow还意味着实际的工作流程是否有效。如果答案是否定的,则可以考虑提供预览功能。

目前市面上的H5/视频编辑器等产品一般都会有预览功能,比如易企秀、兔展等;创作平台的文章编辑器,比如知乎专栏、人人都是产品经理社区等基本也会提供。

图片编辑器虽然部分产品没提供直接的预览入口,但一般会在下载或分享时顺带提供预览。

<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了在UEditor编辑器中增加CSS样式,可以通过以下步骤来实现: 1. 打开UEditor的配置文件,一般来说是config.js文件。 2. 在“UEDITOR_CONFIG”对象中添加如下代码: ```javascript // 自定义样式 , 'customstyle':[ { tag:'h1', name:'tc f-26 lh-66', label:'大标题', style:'border-bottom:2px solid #000;font-size:26px;padding:26px 10px 10px;margin:10px 0 20px;' }, { tag:'h2', name:'tc f-20 lh-48', label:'中标题', style:'border-bottom:1px solid #ccc;font-size:20px;padding:10px;margin:10px 0 15px;' }, { tag:'p', name:'tc f-14 lh-30', label:'段落', style:'font-size:14px;line-height:30px;padding:10px;margin:10px 0;' } ] ``` 以上代码中,我们定义了三种自定义样式:大标题、中标题和段落。其中,每种样式都包括了标签、名称、标签显示的文字和CSS样式。 3. 在配置文件中找到“UEDITOR_CONFIG.toolbars”对象,找到需要使用自定义样式的工具栏按钮,例如“字号”按钮,将其配置修改为: ```javascript ['fontfamily', 'fontsize', '|', 'customstyle', 'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'insertimage', 'insertvideo', '|', 'removeformat', 'source'] ``` 4. 保存配置文件,重新加载页面,即可在编辑器中看到自定义样式按钮。选中需要应用样式的文本,点击对应的按钮即可。 至于自动添加<p>标签的问题,可以在配置文件中找到“UEDITOR_CONFIG.filterRules”对象,将其中的“p”标签过滤规则删除即可。具体代码如下: ```javascript , filterRules: { // <!-- 过滤的标签 --> tagNames: { style: true, script: true, div: 1, p: 1 }, ... } ``` 将其中的“p: 1”删除即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值