chili 默默学编程

Simditor 富文本编辑器使用说明


官网在此:

Simditor


本文目录:

  • 为什么要从原来的 WangEditor 更换到 Simditor
  • 使用说明
  • 安装过程中的 3 个坑
  • 3 个页面的详细代码


为什么要从原来的 WangEditor 更换到 Simditor

要放弃 WangEditor 是因为它有 4 个不好用的地方:

  • 上传图片时莫名其妙的 Error(要是每次上传不了那肯定有个错误,但是同样的动作,有时候成功有时候出错,就让人没有脾气
  • 粘贴过滤功能不起作用,按说明配置了,也不起作用
  • 编辑器的界面有点丑,写完之后的渲染也有点丑
  • toolbar 的位置处理起来麻烦,得自己写脚本控制,没有内置的处理配置

而最终选择 Simditor 是因为随机选择,其实本来还考虑有 Quill CKEditor ,都差不多,就随机选一个。Simditor 界面如下:

Image



使用说明

Simditor 官网是有文档的,是英文文档,可能是国外的公司的产品(没查到公司信息)。

我把主要使用到的内容整理如下:

  • 引入:下载后,找到这几个文件,并引入到自己的 html 文件中
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>

其中 simditor.css 是样式,simditor.js 是主脚本,uploader.js 是上传文件的脚本,hotkey.js 是快捷键脚本,jquery.min.js 和 module.js 是基础依赖包。

  • 在页面生成编辑器:
<textarea id="editor" placeholder="Balabala" autofocus></textarea>
var editor = new Simditor({
  textarea: $('#editor')
  //optional options
});
  • 配置编辑器:在上述 optional options 部分添加配置内容

详细配置方法见文档:simditor 配置文档


安装过程中的 3 个坑

  • 文档中很多标点符号不对,代码无法直接使用
  • 文本写完后的渲染,需要增加特定的 div
  • 图片缩放的 bug ,需要修改源码

特定的 特定的 div:

<div class="simditor">
  <div class="simditor-body">
    {{ article.content |safe }}
  </div>
</div>


图片 bug 需要修改 simditor.js 里的内容:

原始:

Image

修改后:

Image


3 个页面的详细代码

用到编辑器的页面有 3 个

  • 文章新增页(add)
  • 文章继续编辑页(edit)
  • 文章显示页(detail)

文章新增页(add):

HTML 部分

<textarea id="editor" placeholder="Balabala" autofocus name="content"></textarea>

JavaScript 部分

var editor = new Simditor({
  textarea: $('#editor'),
  // options
})

文章继续编辑页(edit):

HTML 部分

<textarea id="editor" placeholder="Balabala" autofocus name="content"></textarea> 
<div class="content-template hidden">
  {{ article.content | safe }}
</div>

JavaScript 部分 

var editor = new Simditor({   
  textarea: $('#editor'),  
  // options
})
var contentTemplate = document.querySelector('.content-template')
editor.setValue(contentTemplate.innerHTML)

之所以要做上述的 innerHTML 转换是因为麻烦的标点问题

文章显示页(detail):

HTML 部分

<div class="simditor">
  <div class="simditor-body">
    {{ article.content |safe }}
  </div>
</div>

JavaScript 部分


reply ( 3 )

usen@2018-08-27 18:23:41

教程写的挺详细,赞一个

winshu@2018-08-30 10:51:46

你这个也是用python搞的

xiaokong@2018-08-30 11:17:38

@winshu(哈哈,假装有 @ 功能) 对啊,后端是 python flask。