Simditor 富文本编辑器多选图片上传、视频连接插入

simditor 是一个基于浏览器的所见即所得的文本编辑器。Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮，支持的浏览器：IE10、Firefox、Safari。

点击这里下载zip文件。你也可以安装 Simditor bower 和 npm:

$ npm install simditor$ bower install simditor

在项目中使用 simditor

导入 simditor 样式文件和 js 文件

<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 是基于jQuery 和 module.js

hotkeys.js 用于绑定热键

uploader.js 是上传文件相关。你不需要导入此文件如果你不想上传功能。

使用 simditor，首先，你需要一个 textarea 这样的元素：

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

simditor 初始化：

var editor = new Simditor({textarea: $('#editor'),upload: {url: '{{ route('topics.upload_image') }}', // 处理上传图片的 URL；params: { _token: '{{ csrf_token() }}' }, //  Laravel 的 POST 请求必须带防止 CSRF 跨站请求伪造的 _token 参数；fileKey: 'upload_file', // 是服务器端获取图片的键值，我们设置为 upload_file;connectionCount: 3, // 最多只能同时上传 3 张图片；leaveConfirm: '文件上传中，关闭此页面将取消上传。'   // 上传过程中，用户关闭页面时的提醒。},pasteImage: true,  // 设定是否支持图片黏贴上传，这里我们使用 true 进行开启；});

textarea 是一个必需的选项。jQuery 对象、HTML 元素或选择器字符串可以通过此选项。

一些可选的选项：

placeholder（默认的）simditor预留位置。使用默认的文本占位符属性值。
toolbar（默认值：true）-显示工具栏按钮
toolbarFloat（默认值：true）固定在浏览器顶部工具栏滚动时。
toolbarHidden（默认：假）-隐藏工具栏。
defaultImage（默认：“图像/图像，PNG的）-默认图像占位符。使用时插入图片Simditor。
tabIndent（默认值：true）使用“Tab”键进行缩进。
params（默认：{ }）插入一个隐藏的输入文本存储参数（键值对）。
upload（默认：假）接受虚假或键-值对。上传图片的额外的选项。例如“URL”、“params”
pasteImage（默认：假）支持上传图像从剪贴板粘贴。用Firefox和Chrome只支持。

Simidtor 扩展

Simditor-Dropzone

这是 Simditor 的一个小插件，它可以让『插入图片』的功能支持『拖拽上传』。

使用

只需要在 simditor-all.js 后引入这个文件即可。

<script type="text/javascript" src="[simple module script path]/module.js"></script>
<script type="text/javascript" src="[simple uploader script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script><!- ..  ***** .. ->
<script type="text/javascript" src="[script path]/simditor-dropzone.js"></script>

然后就可以『拖拽上传插入图片了』，无需做其它配置。

simditor-autosave

Simditor 的官方扩展，运用 HTML5 的 localStorage 技术来自动保存用户输入内容。

如何使用

在 Simditor 的基础上额外引用 simditor-autosave 的脚本。

<script src="/assets/javascripts/simditor-autosave.js"></script>

simditor-autosave 配置

方法一：

直接在使用了 Simditor 对应的 textarea 中设置 data-autosave 属性，其值将作为内容保存时的路径。例如下面的设置数据将保存在 url_path/editor-content/autosave/ 中

<textarea id="txt-content" data-autosave="editor-content" autofocus></textarea>

方法二：

在 Simditor 初始化时，直接写入配置信息中,例如下面的设置，效果跟上面一样，数据也将保存在 url_path/editor-content/autosave/ 中

new Simditor({textarea: textareaElement,...,autosave: 'editor-content'
})

方法三：

在 Simditor 初始化时，可直接指定数据保存路径，如：

new Simditor({textarea: textareaElement,...,autosavePath: '/url_path/editor-content/autosave'
})

注意当方法一和方法二同时定义时，则优先选择方法一中的参数作为保存时的路径

另外，可通过 autosave: false 关闭自动保存。

转载于:https://www.cnblogs.com/zmdComeOn/p/10345795.html

Simditor 富文本编辑器多选图片上传、视频连接插入相关推荐

themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
Spring Boot集成Ueditor富文本编辑器，实现图片上传，视频上传，返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题
学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法还是老样子需求 ...
富文本编辑器quill-editor自定义图片上传
目录 1.页面引入 2.自定义imge处理的图片上传组件 3.图片上传成功后回显嵌入 4.最终呈现效果 5.源码之前我整理过一篇文章,Quill编辑器实现图片上传功能(戳链接可查看) 但是想来那个是 ...
如何部署JSP版本的百度富文本编辑器（带图片上传功能）
博主之前因为公司项目需要部署百度的富文本编辑器到项目中,由于之前一直是后端开发,所以部署上还是费了一番心思的,网上也有很多教程但是用起来总会有各种问题,今天在这里记录一下以备今后的不时之需,也希望帮助 ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
百度富文本编辑器，改变图片上传存储路径
我用的是最新版! 找到以下2个关键文件: YourPath.../Ueditor/php/config.json YourPath.../Ueditor/php/Uploader.class.php ...
edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...

Simditor 富文本编辑器多选图片上传、视频连接插入

Simditor 富文本编辑器多选图片上传、视频连接插入相关推荐

最新文章

热门文章