序
其实,simditor真的是很好用的,只需要简单的配置就可以用的,只是初步接触到它的时候,不知道原理,然后内心又存在着对未知事物的“恐惧”,所以在使用的过程中还是纠结了一段时间的。
编辑文章
simditor的官方网址为http://simditor.tower.im/
上面有它的一些使用帮助。但是,我在使用的过程中,发现很多问题写的不是很清晰,需要自己去摸索和实验。
下载simditor 并使用
首先需要下载simditor的相关js与css文件,放到自己的项目下面。需要引入的css以及js文件先进行引入。
然后进行到很重要的一步,配置自己的js文件,达到真正引入simditor的目的。
(function() {
$(function() {
var editor,toolbar;
Simditor.locale = 'zh-CN';
toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
editor = new Simditor({
textarea: $('#simditor'),
placeholder: '这里输入文字...',
toolbar: toolbar,
pasteImage: true,
defaultImage: '/simditor/images/image.png',
upload: false
});
});
}).call(this);
- 其中有一段是很重要的:
textarea: $('#simditor')
在你自己的html页面中,必须要有一个textarea,它的id为”simditor”,当然你可以给它任何名字,只要不与其他元素有相同的id名。
- 配置说明:
Simditor.locale = 'zh-CN';
这个是将simditor的提示变成中文的,虽然simditor页面简洁美观,很多选项我们一看图标就知道是什么,但是呢,还是给一个中文的标注比较好。
当然也可以设置成英文的。随你喜欢啦!
建议:
将这段代码单独的放在一个js文件里面,以后的页面中,需要用到富文本编辑器,只需要把它包含进来就可以了。很方便的。
上传图片
上传图片我搜索了一下,本来想着有比较靠谱的答案,但是搜索出来的那些答案很杂,而且说法也不一,所以,最后还是安安心心的看文档了,然后就是各种实验。
editor = new Simditor({
textarea: $('#simditor'),
placeholder: '这里输入文字...',
toolbar: toolbar,
pasteImage: true,
defaultImage: '/simditor/images/image.png',
upload: {
url: '上传地址',
params: null,
fileKey: "fileName",
connectionCount: 1,
leaveConfirm: "正在上传,确定要取消上传文件吗?"
}
});
如果需要使用上传功能,需要将upload改成true,也就是允许上传图片。
上传图片的原理
- 1 upload选项中的url是你需要上传的地址
- 2 上传的名字就是filekey,在后台接收图片的时候,需要用到它。
- 3 传回来的时候,是一个json格式字符串
{
success: true/false,
file_path:XXXX
}
- 4 success一定要写,simditor会通过这个来判断上传是否成功。
- 5 file_path 必须要写。当回传file_path成功的时候,simditor会重新发起一个GET请求,去请求file_path对应的地址,将图片取回,并放倒内容框中进行显示。
===============
更新:
今天突然发现文章被回复了,而且对图片上传的这一块有疑问。
所以,我就再进行了一次测试。
测试的结果如下:
在上传图片的时候,设置好上传的路径.
选择要上传的图片,就会通过这个路径将图片信息POST到这个链接地址上去。
当上传成功的时候,也就是返回的信息为:
{
file_path:XXX
success: true
}
这个时候,Simditor会自己发起一个GET请求,将file_path中的图片文件显示在文本框中。