关于Simditor编辑器的那些事儿

在线编辑器

admin 发布于：2018-03-06 11:17:17

阅读：loading

虽然在手机端弄这个网页的编辑器很扯，但是移动端越来越广泛，一些app的使用标准也越来越低，拥有一款顺手的在线编辑器还是会有一些用武之地的。其实在此前我的需求很简单，能够调整字体大小、颜色、能够上传图片就够了，基于此前前后后找了一年多的实际，也找了许多款编辑器，均不是特别喜欢，然而Simditor编辑器功能上满足我的需要，特别是图片这块可以外链图片和上传图片，并且可以调整图片的宽和高。其它方面的功能除了有文本相关的外还有“表格”、“超链接”、“代码”、“引用”等，在移动端上使用还是够了。

运行Simditor编辑器的demo

目前官网上最新的版本是simditor-2.3.12，在下载下来的zip文件中，解压打开至site目录为相关的代码及示例目录，此时打开index.html或demo.html都是无法直接运行的，不知道为何是这样子，这给人的第一感觉是，这啥呀，官网下载源码包里的例子竟然无法打开运行。。。实际上打开demo.html文件稍微改动一下就可以看到示例信息，参考如下：

（1）注释掉首行出的一些文件信息，添加html5的文档信息（如果不加此标准会出现工具栏对不齐的情况）；

（2）在最下方的<script>标签处上面，导入缺少的文件，如分别需要导入simditor.css、jquery.min.js、mobilecheck.js，在360极速浏览器下运行显示正常；

（3）在id="preview"的div元素上增加class="editor-style"属性（可用于输出效果的实时预览）。

完整的修改后代码参考如下：

<!---

layout: default

title: Simditor

id: demo

--->

<!DOCTYPE html>

</section>

（效果预览参考）

其实花点时间看看示例文件就知道，在导入的script文件中包含page-demo.js，该文件为编辑器的初始化调用示例，大概有根据平台初始化对应的编辑器，如上图为电脑浏览器的显示效果，如果当前为手机端，则编辑器只会显示带有6个功能图标的工具栏；preview的预览区域为编辑时的实时预览，当没有editor-style样式时，预览区域中则不会显示出表格、引用等标签的相关样式。

图片编辑功能

对于图片的cao作有插入在线图片、上传本地图片、编辑图片（图片宽高、重新上传图片）等，如果是外链图片，则输入地址后它会自动将图片的宽高获取，手动调整图片宽高后，它也会自动按比例调整，此处重点在于讲述它的上传图片（由于我主要是将其使用于移动端，故有一些问题需要解决）。

1、设置支持图片上传模式

初始化编辑器时，制定upload参数，并设置url为真实的图片上传地址即可在点击工具栏图片按钮时弹出“上传图片”的下拉菜单，点击后会弹出图片选择框，待选择图片后自动上传，并带有上传进度的效果显示（遮罩蒙版），图片上传完成后，自动的加载图片显示；

2、上传图片的服务端代码

在移动端应用上传图片的功能，会涉及到跨域的一个问题，其它则没什么不同，按api返回相应的json格式即可，参考规范如下：

{

"success" ; true/false, --成功或失败标识

"msg" : "上传提示信息",

"file_path" : "[图片路径，数组类型]"

}

3、图片默认大小的问题

由于该编辑器会默认根据图片的大小进行显示，如果从手机相册中选择一张照片，大小约为3M，则对应的宽高基本上为3000X4000的大小了，在手机上显示这么大的图片简直是开玩笑，所以我在这里的解决方法是改写编辑器的源代码，将所有上传的图片大小一律改成大小缩放的形式，详细参考如下：

（1）在导入Simditor的js文件时，指定其上传图片的大小，参考为：

通过给script标签设置width的方式来设置最终上传图片将要缩放至的大小，如果图片宽度小于这个值则不做处理。

（2）改写simditor.js图片加载时的代码，由于图片未上传至服务器时将会显示出图片的默认大小，所以我们需要获取到图片的大小，并且根据设置的width值来做图片的大小缩放至，待图片提交至服务器后台时将读取存储至服务器，并且将图片的大小缩放至相关比例的大小，参考提交至服务端时的url地址，其中uploading为服务器端设置的是否监控图片的上传进度，width为将上传的图片缩放至的宽度的大小，参考如下：

upload: {

url: "http://www.chendd.cn/mobileservice/appFileUpload?uploading=false&width=300"

}

其它说明

（1）、关于手机端上传图片时的宽高问题，本文虽然很好的解决了，但是属于侵入式的修改了源代码，后续改组件升级时需要注意调整等；

（2）、关于本例中有个服务器端的上传接口地址，由于此时并未做安全上的token校验，存在一定风险，后期会随时加上，所以该地址可能会无效；