电商系统前后台解析——店铺装修方法论

1、CKEditor5是一款功能强大的富文本编辑器，支持显示和编辑多种类型的文档，Word文档。

2、CKEditor5的插件或功能，用户可以加载和浏览Word文档，在编辑器中对其进行编辑和格式化。

做过Web开发的朋友相信都使用过富文本编辑器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写，使用简单，非常轻量级。

1、NicEditor

NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。

NicEdit是我见过最轻量级的富文本编辑器，总共就一个JS文件和一张

使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本编辑器

2、KindEditor

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、NET、PHP、ASP等程序接合。

“在现实生活中，商店需要翻新; 电子商务也是如此。 有必要通过CMS系统完成“店铺装修” - 每列的设计和布局。

我写了两篇关于电子商务系统的文章。 文章，这是第三篇文章。 本文介绍了电子商务系统的店铺装修功能，店铺装修简单就是页面的动态配置。 例如，我们的应用程序主页从上到下的布局如下：搜索栏，录制地图，标签栏，广告空间，产品推荐; 我们可以将设计原型交付给R＆D进行开发。

那么店铺装修的作用是什么？

店铺装修可以先改变页面组件的布局，如标签栏和广告位的位置; 您可以增加或减少页面的组件，您可以将优惠券组件添加到主页，您也可以删除轮播的组件; 您还可以定义不同的组件。 风格，旋转木马地图可以选择3或4，标签栏可以选择单行或多行。

可以看出，店铺装修的过程实际上就是我。 绘制原型的过程。 首先定义一个页面，然后定义组件，设计组件的样式; 最后生成页面。 但是，店铺装修将此过程写入系统程序。 修改后，系统成为修改后的系统。

同时，可以看出，店铺装修过程修改了系统代码，这意味着技术要求相对较高。

实际上，店铺装修本身就是一个CMS系统，店铺装修它只是CMS系统在电子商务系统中应用的一部分。

首先，CMS系统与商店装饰

CMS系统之间的关系称为内容管理系统，适用于多个行业，CMS系统应用于电子商务行业。 它已成为一个商店装饰。

让我们看一下全书给出的定义：CMS是“内容管理系统”的缩写，意思是“内容管理系统”。

内容管理系统是企业信息化建设和电子事务政府事务的新宠也是一个相对较新的市场。 对于内容管理，行业没有统一的定义，不同的机构有不同的理解。 说内容管理系统行业没有统一的标准，但我们知道它是管理内容; 而这个内容是放在电子商务系统中的各种页面，电子商务系统的内容管理也称为店铺装修，店铺装修的技术应用是CMS技术。

现阶段，由于不同 产品和公司的不同需求，我们看到很多产品都有不同的店面装修功能。 有些产品只能调整页面组件的布局。 有些产品只能配置主页。 高技术要求体现在以下事实：很多时候我们不能充分利用CMS系统，并且不同的产品由于不同的业务而具有不同的设计。

本文将总结店铺装修的设计方法和方法。 拥有一个好的方法可能不会让我们立于不败之地，但总比没有好。

二，如何设计一个店铺装修

电子商务系统页面的动态配置之所以称为店铺装修，是因为这个功能类似于我们家的装饰。 在介绍店铺装修之前，我们是第一家。 首先考虑如何装饰房子：

1。 房子刚刚被很多房间所覆盖，不同房间的装修肯定不同 - 客厅需要放电视，测试需要上厕所，所以我们要选择主页。 一个好房间。

2。 当我们选择一个好房间时，我们必须进行翻新。 在装修之前，我们还是需要做一件事，就是买家具，买装修材料，现在我们要去装修厕所，我们需要准备厕所，垃圾桶，卫生纸。

3。 当我们准备上厕所时，我们必须考虑这样一个问题：使用什么类型的厕所，最新的功能齐全的日式风格，或市场上的普通厕所，无论是金色马桶还是银色马桶 ，也就是我们可以说我们可以有多种选项来装饰物品。

电子商务系统的店铺装修功能实际上是翻新房子的过程，但房子已成为我们的产品，房间已成为一个页面，装饰物品是组件。

当我们装修房子时，我们必须提前考虑我们需要的东西，然后再买回去装饰它。 这也是最重要的一步。 房子的翻新有三个步骤：房子和房间是肯定的; 关键是准备什么物品，因为物品是买的，而且有各种物品，物品的价格决定了房子的奢侈品。

同样对于电子商务商店的装饰，准备组件也是最重要的一步，即定义组件的样式和规则，将其写入代码，并在我们使用它时直接调用它。 因为您无法自己创建新组件，所以我们只能在系统的现有组件库中选择所需的组件。 我们可以自定义组件的样式，不同的组件样式有不同的规则。

那么什么是组件？ 组件是一个单元。 例如，轮播是一个组件，搜索是一个组件，一个产品是一个组件，每个组件都有很多样式。

下面，我们根据装修房子的过程来寻找店铺装修的过程和需要准备的东西。

1。 首先，我们要选择要翻新的页面，无论是主页还是详细页面还是列表页面等，每个页面的布局布局肯定是不同的。

选择页面时需要考虑几个问题：是否可以翻新每个页面并翻新每个页面？ 而这些是现有的页面，我可以创建一个新的页面进行装饰，如果是新页面，这个页面不是系统的一部分，如何联系系统。

2。 选择页面后，我们必须选择布局和布局的组件。 以主页为例。 在哪里搜索，放置旋转木马的位置以及放置广告空间的位置是我们需要考虑的问题。

这是选择组件，前提是我们有组件，这意味着我们需要在设计产品时为每个组件定义样式和规则。 在将这些组件写入系统后，我们可以调用这些组件。 。

3。 在我们完成布局布局之后，我们选择了每个组件的样式和配置信息。

例如，如果我们选择旋转木马，我们会选择几个，三个或四个; 选择样式后，我们需要配置特定信息：我们要上传图像，然后设置图像的链接。 这些组件单击可以跳转到其他页面，不同组件需要配置的信息也不同，具体取决于组件本身。

摘要：需要事先定义组件定义规则; 装饰分为三个步骤：选择/创建页面组件布局组件配置。

以下将重点介绍文章的主要内容，我将首先介绍不同组件的样式和配置信息，然后介绍店铺装修过程的细节。

三，组件类型

组件类型的丰富程度决定了装饰效果，组件越多，装饰越可选。

例如，随着产品的迭代和改进，常用组件将继续增加。 设计人员将根据具体要求进行迭代，组件的定义也是包容性的。 许多东西可以定义为组件，粒度不固定，两个函数可以用作组件，活动也可以用作组件。

常用组件形式：

顶部搜索栏，搜索栏，公告，产品组，业务组，辅助导航，列表导航，富文本，标题栏，引导线，辅助空白，按钮组图形，按钮组文本 ，单张，旋转木马，窗口，展览，图标组，音频播放器，优惠券。

这里是对组件配置的描述，系统仍在优化中，可能有一些你无法理解的功能。 但这不是重点。 关键是要了解设计的逻辑和方法，然后将其与您自己的经验相结合，以总结您的知识。

组件的核心是配置组件样式和信息，主要取决于我在文字中写的内容。 配置信息，这些更重要，中显示的配置信息太复杂，有时有时不使用。

组件配置的复杂性也可以设计得很简单，具体取决于具体需求。

31顶部搜索栏

顶部搜索栏嵌入在顶部导航栏中。 如果有更多页面，则需要嵌入它以为页面提供更多空间。

如果页面内容不是太多，顶部导航栏只能显示标题，顶部搜索栏固定在顶部; 当搜索栏点击搜索区域时，您需要跳转到单独的搜索页面和搜索结果页面，搜索需要配置列的信息是：

是否添加按钮：您可以选择不 加; 如果在搜索栏的左侧或右侧选择了添加按钮，则需要上传按钮图标和图标颜色，即图标的链接地址。 图标也可以替换为。 如果使用，则无需设置背景颜色。 该按钮可用于设置左按钮或右按钮。 搜索框背景颜色用户搜索文本颜色搜索框样式：直角，圆弧，圆角

32搜索栏

搜索栏类似于顶部搜索栏，区别在于顶部搜索栏固定在 top搜索栏的位置不固定，可以自由放置。 同样，需要提前定义搜索页面和搜索结果页面。

33公告

公告类似于横幅广告。 通常，有必要在系统中包含产品，跳转到文章详细信息或自由设置链接。

34商品组

商品组是比较复杂的组件之一，因为对于电子商务系统来说，最重要的是商品，在电子商务系统中有两种主要的商品展示形式： @]产品列表产品详细信息是不可否认的，产品详细信息是显示产品信息的主要位置，用户购买在很大程度上取决于产品详细信息页面的设计。 但在进入产品详细信息页面之前，首先要面对的是产品列表页面。 产品列表页面的质量决定了用户进入详细信息页面的概率。 因此，配置时产品列表组件更复杂。 主要配置信息是：

列表样式：单列显示，双列显示，三列显示，列表首次显示（这主要是产品列表显示形式）。 产品选择：选择商品可直接从产品清单中获取，或按类别，产品组进入

35商家群

选择商家：选择商家类似于所选产品，可直接通过商家列表获取， 或者可以分类获取

36列表导航

列表导航在大多数情况下，个人中心使用的页面是许多功能的玄关点，您需要编辑列表标题和链接地址。 您可以添加多个列表; 您还可以选择不同的样式，例如不添加图标，也不添加“查看”提示文本。

37富文本

富文本编辑器使用不太多，主要用于一些引入偏差的地方。

38按钮组图形

按钮组主要应用于主页面，如家庭轮播地图的底部，可以是多个类别的玄关，或子模块的玄关; 定义每个按钮的文本，上传Icon，然后设置跳转链接，可以设置多行。

39按钮组文本

按钮没有图标，主要应用场景是模块下的功能类别，例如我的点数和点数下面的兑换记录。

310单张

单张大组件，主要用于特殊事件的介绍页面，通过链接进入特殊事件列表。

311 Image Carousel

Carousel图像，用于每个主页面，设置数量，链接地址。

312优惠券

优惠券通常不是按照以下风格设计的，没有实际意义。 通常，您可以使用链接优惠券，或设计各种优惠券样式，选择不同的样式，并在您选择优惠券时自动填写内容。

组件定义和设计的描述

组件的类型和样式越多越好，但组件的配置越少越好，多样性的丰富性决定了装饰的灵活性。 但是，组件的配置置信度不应太高。 如果自动获得，它可以自动获得。 我上面提到的只是被理解，因为许多配置信息是无用的，主要逻辑是理解CMS系统的逻辑。

店铺装修功能是一种营销工具，对技术也有很高的要求。 现在基本上有两种方法可以使用它：

对接第三方插件：这种方法方便快捷，不需要研究和开发。 缺点是功能逻辑复杂，不能具有良好的用户体验，不利于以后的迭代，也不能很适合公司的业务。 自主开发：这种方式的研发成本非常高，但优势在于组件的风格和规则可以自己定义，极大地优化了用户体验和可操作性，但缺点仍然很高 成本。

四，店铺装修流程

店铺装修店是页面的首选，然后配置组件信息。

41选择页面：哪些页面需要装饰？ 哪些页面不需要翻新？

当我们开始装修时，第一步是选择要翻新的页面。 理论上，所有页面都可以翻新，但实际上我们不需要装饰这么多页面。 因为许多页面的装饰毫无意义，我们必须首先考虑哪些页面需要翻新以及哪些页面不需要翻新。 这对我们来说非常重要。

因为它直接影响研发成本和产品设计，例如一些相关页面，个人中心页面不需要翻新。 在我们定义那些需要翻新的页面之前，我们需要考虑一下我们的工作。 商店装修功能的最初想法是什么？ 我们开了一家店，为什么要装饰呢？

因为漂亮的外观可以吸引顾客，如果我们的内饰非常漂亮，那么顾客会觉得这个店铺很好; 也就是说，我们店铺装修的初衷是为了营销需求，我们的目的是向用户展示他们想要看到的东西。

因此，在决定哪些页面需要翻新之前，让我们考虑哪些用户来到我们的商店以及哪些页面对用户的购买至关重要。 因为装修的目的是为了营销，而营销的目的是为了赚钱，赚钱并不取决于用户是否购买，所以我们必须考虑购物中心的哪些页面对于最终购买是至关重要的 用户。

我们可以把自己置于思考当你在淘宝网购买东西时想要看到什么，想要看到一些你认为重要的信息，以及哪些信息对你的最终购买具有决定性作用; 你常常和哪些页面联系是好的，所谓的思维用户场景。

首先是主页，主页是进入商城的用户的第一页和页面。 这个页面相当于商场的外观 - 重要的页面，没有人，绝对没有人。 主页上有很多信息要显示。 许多活动，包括主题玄关，都显示在主页上，因此主页需要进行翻新。

我有时可能会在主页上停留一段时间，看看我最近在做什么活动; 并且主页的配置需要基于特定的营销需求。 例如，节日即将举办一些特别活动，有新产品。 推荐到主页。

在我们进入产品详细信息页面之前，我们有时需要一个页面，即类别列表页面。 此页面仅用作频道。 在一些小户型商场系统中，底部导航栏是分类的，但实际上，稍微成熟的商城系统不会让分类占据底部导航，因此分类页面不需要翻新。

有人可能会说产品详细信息页面需要翻新。 我们来谈谈产品详细信息页面，这意味着产品的详细信息。

是的，这个词“信息”使用得很好，需要进行测试。

因为我们购买或不购买一件事取决于什么？

有些人说这是需求，但事实上它是毫无意义和夸大的。 这是一个非常广泛的概念，无法指导我们做出具体决定。

虽然作为产品经理，我从不把需求放在嘴里。 需求在业界是常见的。 每个人都知道没有必要反复解释。 由于用户来到详细页面，他肯定需要它; 即使他不来，他也有需要，即使他不需要淘宝，他也需要它。

你真的想买什么？ 这取决于对产品的理解程度，即对产品信息的理解程度。 如果我不得不花很多钱来决定买东西，我相信在我买之前我就知道这件事。

详细页面的核心信息有两部分：产品信息介绍，产品评估，那么这些信息的显示会有一些固定的格式，不能随意改变。 如果细节页面任意改变，将导致用户干扰信息的获取，从而影响用户的最终购买;

进入商城，我们经常使用的一个组件是搜索功能，与从分类层看到的相比我们想要的产品，直接搜索似乎更方便，所有搜索结果页面都需要翻新

购物车页面也是我们经常使用的页面，购物车也需要翻新，至于个人中心是不需要翻新的。

同时，针对特殊活动的需求，店铺装修需要支持自定义页面，并将显示页面作为特殊产品使用。 当然，自定义页面和特殊事件之间没有必要的连接。 自定义页面用于创建页面，特殊事件。 显示页面也可以内置到模板中

411如何确定哪些页面需要翻新，哪些页面不需要装饰

以确定哪些页面需要装饰。 我们可以从这些方面思考：

用户联系频率：联系频率越高，我们需要装饰的越多（家庭，购物车）。 用户停留时间：用户停留的时间越长，页面需要翻新的越多（主页）。 用户点击频率：用户点击页面的概率越高，需要的装饰（搜索结果页面）就越多。 412如何判断哪些页面不需要装饰（不需要装饰，更不用说不需要改变，迭代优化）

信息复杂页面：这些页面一般都有固定格式的用户显示信息（详情页面） ，个人中心）。 与产品关联不强的页面:(帮助，设置）。

42配置组件信息

了解哪些页面已经过装饰，组件已经修复，下一步是进入页面配置（知道哪个房子，材料也可用，以下工作都可以）。

选择页面然后配置组件信息，最后生成整个页面，并将其同步到系统，这需要实现到特定产品的交互设计中; 取决于您如何布局页面，如何拖动，交互。

在我看来，如何将上述信息实施到具体的产品设计中，让每个人都能看到和感受到。

参考我上面切的，基本上类似于左侧是预览，右侧是组件，然后填充它，最后保存，完成。

五，店铺装修的具体产品设计方法

首先，后台的菜单结构，店铺装修功能可以单独取出，也可以放在促销模块中，视复杂程度而定 系统的。

如果装饰功能特别简单，例如，您只能调整首页上组件的位置，如果您只能调整一个或几个组件，只需将其放入促销模块即可。

如果店铺装修的效果只是放置广告，或者内置特殊活动的页面，店铺装修的功能比较简单，只需把它放在促销模块中，菜单只需要两个，如 如下：

51内置于促销系统

促销系统 - 广告展示位置

进入后，它是系统页面的预览，显示广告位的使用情况，可以编辑和链接 广告位。 。

促销系统 - 特别活动管理

所谓的特别活动是促销活动的延伸，我在上一篇文章中已经提到过; 进入后，你可以看到特殊活动页面的模块，每个模板的风格绝对不同。 即使是模板也可能有多个页面（带有底部导航栏的模板）。 选择模块后，进入页面的配置模式，即上述步骤42。 您需要上传产品，等。具体取决于您正在设计的模板的样式。

52由于店铺装修系统独立存在

作为店铺装修，菜单和功能如下：

1级菜单：系统页面管理

2级菜单显示可以的系统页面 进行翻新，单击页面进入页面的配置界面。 （参见42）

1级菜单：自定义页面管理

第二级菜单显示可以翻新的系统页面。 单击该页面进入页面配置界面。 （见42）

Level 1菜单：创建自定义页面

点击进入页面的配置界面，只是一个空白页面。 （见42）

描述

你可以考虑一下。 感觉独立系统的存在感觉如何？ 没有比嵌入式促销更多的功能。 由于它是一个独立的系统，它应该包含51，然后是广告。 如何交付，如何举办特别活动？

您可以在可以配置的页面中的任何位置添加广告，设置跳转链接，而不限于页面格式。

土巴兔在线免费为大家提供“各家装修报价、1-4家本地装修公司、3套装修设计方案”，还有装修避坑攻略！点击此链接：https://wwwto8tocom/yezhu/zxbj-cszyphpto8to_from=seo_zhidao_m_jiare&wb，就能免费领取哦~

这是《后台产品设计指南》系列文章的 第11篇 内容，更多精彩可以点击下方链接查看。

后台产品设计指南

富文本编辑器

富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，可以帮助用户快速地添加文字、、表格等内容并设置格式，最大的优点就是所见即所得。

常见的在线编辑器有135编辑器、壹伴编辑器等；可以集成到后台的富文本编辑器有UEditor、wangEditor等。需要说明的是不同平台的富文本编辑器在支持的样式上有细微的区别，不同平台都根据自己的业务做了调整，比如财经网站上的编辑器就增加了股票选择功能。

粗体、斜体、删除线、引用这些属于比较常规的功能，这里选取几个相对复杂的功能和大家讲解一下。

1上传

用户上传的需要经过平台压缩处理，保证在前台能尽快地加载出来。这个上传可以是点击上传按钮进行上传，直接复制本地到编辑器窗口、拖拽到编辑器窗口、截图复制到剪贴板再粘贴到编辑器窗口、复制外部文章中的到编辑器窗口。需要说明的是如果引用的外部增加了防盗链，用户在编辑器里面是无法上传的。

2上传视频

用户选择本地视频文件上传到服务器供其他人浏览，在用户上传过程中可以设置视频的封面；如果是历史上传过的视频，平台能直接读取系统中的记录而不是重新上传以节省资源和提高用户体验。

用户上传视频后在前端播放视频这个环节也非常重要。根据场景分为微信、浏览器，APP；根据平台可以分为安卓、苹果、PC等。如何选择一款在各端体检都出色的播放器需要产品经理和开发人员一起协作。比如目前浏览器中视频倍速播放已经是一个标配，如果不支持就很影响用户体验。

3公式

编辑器中输入公式一般是使用TeX公式语法插入字符，系统会自动生成对应的供用户使用。下文中提到的Markdown也支持TeX公式。

4实时保存

自动保存是指编辑器每隔3-5s就自动保存一次，可以保存在用户本地，也可以保存服务端。

很多平台增加了历史版本功能，相当于给草稿箱设置了不同的版本，用户可以选择回滚到历史的任意版本。当然这个设计是比较消耗服务器资源的，所以产品经理要评估下是否有必要和保存的历史版本个数。

Mrdkdown编辑器

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown的理念是，能让文档更容易读、写和随意改。Markdown在中文输入场景下有一个比较明显的缺陷，那就是需要用户在中英文间进行切换，稍微有一点麻烦。

如果只是简单的整理内容，简单的几个标签就能满足需求。常用的标签包括标题、引用、无须列表、分割线。

Markdown使用两次回车键是换行，但部分平台通过特殊方式也实现了一个回车换行（比如作业部落），但一个回车和两个回车的换行间距是不一样的。

编辑器虽然是后台的功能，但对应的前端展示也非常重要。比如一行展示多少字，字体的默认颜色，这些都需要产品经理和UED团队一起定义好。

一个精心设计的编辑器能给用户带来愉快的用户体验。比如印象笔记中的超级笔记是用/唤起功能菜单，这个操作就很不友好。国外的区块笔记使用的是/，这个并不影响用户继续输入英文；而国内的用户如果要使用/就必须从中文切换到英文然后再切换回中文，相信是谁都不会喜欢。而蓝湖推出的超级文档在这个细节上就很贴心，支持英文的/也支持中文的、，可以看出设计人员肯定是下了功夫的。

平台需要结合自己的业务特征选择合适的编辑器类型，同时考虑自研还是在开源的基础上修改。无论选择哪一种，都是为了给用户提供一个良好的创作工具。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者与我一起交流探索，共同进步。

Slate 是一个完全可定制的富文本编辑框架。通过 Slate，你可以构建出类似 Medium、Dropbox Paper 或者 Canvas 这样使用直观、富交互、体验也已成为 Web 应用标杆的编辑器。Slate 本身并不是一个编辑器，而是一套在 React 和 Immutable 的基础上，用于操作富文本数据的框架。基于 Slate 实现一个富文本编辑器，相当于是使用 React（视图层）+ Immutable（数据层）开发一个普通 Web 应用,Slate相当于Controller。

Github：

文档:

在线示例：

使用npm包管理

Slate 开放了一套用于构建编辑器的模块。其中，最重要的是 Editor 组件:

启动的时候我第一次失败了，然后重新启动下就行了，然后打开浏览器localhost:8080

通过简单的语法实现Markdown的编写

你可以从别的网站直接粘贴带有样式的文本

写过html标签的都知道

类似<textarea></textarea>

可以在应用某些更改后保存新版本，然后随时回滚到以前的版本

以下是开发者的一些说明（文档有中文版）：

类似加粗和斜体的结构可以开箱即用，但评论、嵌入内容以及更多的定制性需求呢？

用户的编写体验可能不错，但在执行编程式变更时却不必要地复杂，而这对于构建高级的编辑行为至关重要。

这是一个非常常见的使用场景，但要实现将文档转换为 HTML 或 Markdown 的简单功能都需要编写大量的模板代码。

各种编辑器在重新发明视图层的轮子，而非使用 React 这样已有的技术方案。你必须学习一套带着自有限制和陷阱的新系统。

编辑器内部的数据结构使其无法用于实时、协作的编辑场景中，除非重写编辑器。

许多编辑器没有对外开放本应为开发者所复用的内部工具，以至于不得不重新发明轮子。

不少编辑器是围绕简单的扁平文档结构设计的，这使得表格、嵌入内容和字幕等内容难以理解，有时甚至无法实现。

Slate是一个可以高度定制化博众家之所长的富文本编辑器框架，其强大之处远不是本文所展现的这一点，你可以使用它来创建复杂且优雅的富文本编辑器，相对其他很多编辑器本身来说非常的灵活，文档也非常的详细，目前也正在不断地迭代当中，对富文本编辑器定制化需求比较高的可以尝试，希望能对你有所帮助！

editor组件不能换行解决方法：

1检查组件设置：可能是因为组件的设置导致了自动换行功能被禁用。可以查看组件的文档或者设置项，确认是否存在相关选项。

2快捷键：有些编辑器组件可能没有自动换行按钮，但是可以通过快捷键实现换行。例如在Windows系统中，可以使用“Ctrl + Enter”实现换行。

3代码输入模式：如果您正在使用代码输入模式，可能需要手动添加换行符。例如在HTML中，可以使用“

Editor组件是一个富文本编辑器，提供了常用的文字编辑排版，链接、Email插入，以及和文件的上传功能。

Notepad优于Windows记事本的一个文本编辑器，完全免费且开源，对于不同的编程语言可以实现语法高亮，代码折叠以及宏，起可定制性非常强。

PSPad编辑器PSPad是一个Windows平台上免费的适合程序员使用的编辑器。

EmacsEmacs文本编辑器深受高级程序员的喜爱，具有内置的宏功能以及强大的键盘命令，这对于编辑代码来说真是一种享受，这个程序几乎被移植到了每一个平台，并有多个发行版，其中最流行的是GNUEmacs和XEmacs，它们是跨平台、完全免费并且开源。

Sublime

Text3(Windows)SublimeText3支持但不限于C,C,C#,CSS,D,Erlang,HTML，Groovy,Haskell,HTML,Java,JavaScript,LaTeX,Lisp,Lua,Markdown，Matlab,OCaml,Perl,PHP,Python,R,Ruby,SQL,TCL,TextileandXML

等主流编程语言的语法高亮。拥有优秀的代码自动完成功能(自动补齐括号，大括号等配对符号；自动补全已经出现的单词；自动补全函数名)，非常智能。

VimVim是从vi发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用。和Emacs并列成为类Unix系统用户最喜欢的编辑器。

TextMateMac平台下一款强大的文本编辑器（目前已经提供Windows版本），代码自动完成、可直接在文档中运行SHELL命令、支持宏。

是一款由韩国SangilKim（ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

GeditLinux下的一个纯文本编辑器,但你也可以把它用来当成是一个集成开发环境(IDE),它会根据不同的语言高亮显现关键字和标识符。

是一套功能强大的文本编辑器，可以编辑文本、十六进制、ASCII码，完全可以取代记事本（如果电脑配置足够强大），内建英文单字检查、C及VB指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。

如果有其他好用的的文本编辑软件，欢迎大家留意评论。

一、下载ueditor

请自己下载ueditor版本（本人是PHP版本 UFT-8版，不包含_examples、_src等文件夹及文件）。下载完成后，会得到以下这样的目录结构的：

ueditor文件说明：

dialogs 是存放各个弹出窗口应用功能的文件，包含html,js

lang 是存放编辑器语言的文件，有中文和E文

php 是存放文件上传、涂鸦、远程、在线管理，添加视频的php源码文件，可以按自己的需求修改

themes 当然就是主题样式存放的地方

third-party 是第三方插件文件存放地方。

editoralljs 此文件是所有_src里的js源码的合集

editorallminjs 此文件是editor_alljs的压缩版

editorconfigjs 此文件是UE的配置文件

editorparsejs 此文件是UE的解析文件

editorparseminjs 此文件是UE的解析压缩文件

二、重命名文件夹名称，并复制UE到dede

重命名：ueditor1_3_6-utf8-php，为ueditor。将ueditor全部复制到dede的include文件夹下！完成后ueditor在dede里边的结构如下图：

三、修改 include/inc/inc_fun_funAdminphp 让 DD 能够调用到 UE

打开 include/inc/inc_fun_funAdminphp ，大约150行，有个function SpGetEditor，这是DD调用编辑器的，我们要修改它，达到能够调用UE，下拉到226行左右，加上以下代码：

 //百度编辑器

    {

        $fvalue = $fvalue==''  '<p></p>' : $fvalue;

        $code = '<script type="text/javascript" charset="utf-8" src="'$GLOBALS['cfg_cmspath']'/include/ueditor/ueditorconfigjs"></script>';

        $code = '<script type="text/javascript" charset="utf-8" src="'$GLOBALS['cfg_cmspath']'/include/ueditor/ueditorallminjs"></script>';

        $code = '<link rel="stylesheet" type="text/css" href="'$GLOBALS['cfg_cmspath']'/include/ueditor/themes/default/css/ueditorcss"/>';

        //$code = '<textarea name="'$fname'" id="'$fname'" style="width:100%;">'$fvalue'</textarea>';

        $code = '<script type="text/plain" name="'$fname'" id="'$fname'">'$fvalue'</script>';

        if($bbcode)

        {

            $code = '<script type="text/javascript">UEgetEditor("'$fname'",{toolbars:[["Source","|",

        "bold", "italic", "underline","|","fontsize","forecolor","emotion","Undo", "Redo"]],initialFrameHeight:100});</script>';

        }

        else

        {

            $code = '<script type="text/javascript">UEgetEditor("'$fname'",{initialFrameHeight:450});</script>';

        }          

        if($gtype=="print")

        {

            echo $code;

        }

        else

        {

            return $code;

        }

    }//bd end

四：后台=》系统=》系统基本参数=》核心设置=》Html编辑器

填入ueditor就好了