74. 编辑器优化

5.1

5.1

简介

在本节里，我们把新建表单里的话题正文改成文本编辑器，以此来提高用户体验。

需求分解

• 在本节里我们只实现输入文本体验，不需要考虑使用编辑器在正文里插入图片需求；
• 把正文输入框改成编辑器后，保存逻辑和验证还是维持不变。

编辑器选择

Simditor 是 tower.im 团队的开源的markdown编辑器 在本项目里我们将使用 Simditor 来提高用户体验。

下载 Simditor

开始之前，先 点击此处下载 Simditor ，下载完成后解压到文件夹 simditor-2.3.6 ，内容如下：

集成到项目中

我们在 public/static/assets/plugin 里创建以下两个子文件夹来分别存储 Simditor 的 CSS 和 JS 资源文件。

• public/static/assets/plugins/simditor/css
• public/static/assets/plugins/simditor/js

将下载的 simditor.css 放置于 public/static/assets/plugins/simditor/css 文件夹，将 hotkeys.js, module.js, simditor.js, uploader.js 四个文件放置于 public/static/assets/plugins/simditor/js 文件夹中，如下：

加载和渲染

因为Simditor 的样式和脚本文件只需要在话题创建页面中使用，出于性能考虑，我们将只在话题创建页码中加载这些文件，所以我们在话题创建表单页面引入新添加的simditor资源文件。

application/index/view/topic/form.html

{extend name="layout/main" /}
{block name="styles"}
    {css href="/static/assets/plugins/simditor/css/simditor.css" /}
{/block}
{block name="content"}
.
.
.
{block name="scripts"}
<script src="/static/assets/plugins/jquery-validate/jquery.validate.min.js"></script>
<script src="/static/assets/plugins/jquery-validate/bootstrap.validate.js"></script>
{js href="/static/assets/plugins/simditor/js/module.js" /}
{js href="/static/assets/plugins/simditor/js/hotkeys.js" /}
{js href="/static/assets/plugins/simditor/js/uploader.js" /}
{js href="/static/assets/plugins/simditor/js/simditor.js" /}
<script type="text/javascript">
    jQuery(function($){
        var editor = new Simditor({
            textarea: $('#body-field'),
        });

        validAndSubmitForm(
            .
            .
            .
        );
    });
</script>
{/block}

效果展示

刷新页面即可看到我们的编辑器，不过大家先不要使用编辑器里的上传图片功能，因为要实现上传图片功能我们还需要添加一些开发才能完成，这个我们将在下一节介绍。

Git 版本控制

下面把代码纳入到版本管理。

$ git add -A
$ git commit -m "Simditor 编辑器"