ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

simditor富文本编辑器最新最简单的使用方法

2020-01-14 21:04:03  阅读:295  来源: 互联网

标签:文本编辑 上传 编辑器 最新 simditor path true 图片


Simditor这个编辑器就不过多的介绍了,反正我个人感觉挺不错,界面好看并且使用起来也特别简单。
Simditor富文本编辑器
一、Simditor下载
官网链接https://simditor.tower.im/,可以直接下载zip压缩包或者通过git来下载。
二、引入文件
你下载的东西可能会非常多,但我们需要用到的有

<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>

把上面文件引入之后,我们就开始创建编辑器了
三、基本使用
写html编辑器标签

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

初始化编辑器js

<script>
		$(function(){
			var editor = new Simditor({
			  textarea: $('#editor'),
			  toolbar: [
			          'title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale',
			          'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link',
			          'image', 'hr', '|', 'alignment'
			      ],
			  placeholder:'写点什么呢......',
			  defaultImage:'images/image.png',//插入图片显示的默认图片
			  params:{
				  'key':'v'
			  },//在textarea中插入一个隐藏的输入以存储参数
			  pasteImage:true,//是否允许直接粘贴图片
			  cleanPaste:true,//自动删除粘贴内容中的所有样式
			  upload:{
				  url:'/api/api.php',//后台接收图片地址
				  params:null,
				  fileKey:'uploadFile',//后台接收图片需要
				  connectionCount:3,//允许同时上传图片数
				  leaveConfirm:'正在上传图片',//如果在上传文件时离开页面,则会显示此消息;
			  }
			});
		});
	</script>

如果不出意外的话,一个simditor编辑器已经出现了。

四、simditor上传图片
我们既然选择了富文本编辑器,那么上传图片一定是必不可少的一个功能,那么我们来看看后台应该怎么写
测试使用代码

<?php
$arr=[
	'success'=>true,//true或false
	'msg' => 'message',
	'file_path'=> '/upload/1.png'
];
echo json_encode($arr);

使用测试代码是想让整个代码先跑通,simditor对后台返回的json格式要求就是上面那样的,这有一点需要注意的是,不要使用return来返回数据要使用echo,至于为什么,这里不多解释了。
如果上面代码你跑通了,那么接收上传的图片并且保存一定是你想要的,往下看,

<?php
$image = $_FILES['uploadFile'];//对应初始化编辑器的fileKey
$path='../uploads/4.jpg';
if($image){
	move_uploaded_file($image['tmp_name'], $path);
}
$arr=[
	'success'=>true,
	'msg' => $image,
	'file_path'=> $path
];
echo json_encode($arr);

上面代码只是简单的把图片保存到了$path这个路径中了,至于上传图片重命名什么的就简单了,自己动手吧。

迷鹿先生 发布了1 篇原创文章 · 获赞 0 · 访问量 11 私信 关注

标签:文本编辑,上传,编辑器,最新,simditor,path,true,图片
来源: https://blog.csdn.net/m0_46182945/article/details/103978993

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有