74. 编辑器优化
简介
在本节里,我们把新建表单里的话题正文改成文本编辑器,以此来提高用户体验。
需求分解
- 在本节里我们只实现输入文本体验,不需要考虑使用编辑器在正文里插入图片需求;
- 把正文输入框改成编辑器后,保存逻辑和验证还是维持不变。
编辑器选择
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 编辑器"
推荐文章: