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

点击这里下载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 元素或选择器字符串可以通过此选项。

一些可选的选项:

  1. placeholder(默认的)simditor预留位置。使用默认的文本占位符属性值。

  2. toolbar(默认值:true)-显示工具栏按钮

  3. toolbarFloat(默认值:true)固定在浏览器顶部工具栏滚动时。

  4. toolbarHidden(默认:假)-隐藏工具栏。

  5. defaultImage(默认:“图像/图像,PNG的)-默认图像占位符。使用时插入图片Simditor。

  6. tabIndent(默认值:true)使用“Tab”键进行缩进。

  7. params(默认:{ })插入一个隐藏的输入文本存储参数(键值对)。

  8. upload(默认:假)接受虚假或键-值对。上传图片的额外的选项。例如“URL”、“params”

  9. 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 关闭自动保存。

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

  1. wangEditor富文本编辑器使用及图片上传

    引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...

  2. 富文本编辑器TInyMCE,本地图片上传(Image Upload)

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  3. 百度富文本编辑器整合fastdfs文件服务器上传

    技术:springboot+maven+ueditor   概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...

  4. 富文本之BootStrap-wysiwyg 带图片上传功能

    BootStrap-wysiwyg插件具有良好的编辑功能和展示效果. 一.使用方法在网上有很多,在此记录自己使用过程中的一些问题和解决方式. 相关依赖: bootstrap-wysiwyg.js (核 ...

  5. iView + vue-quill-editor 实现一个富文本编辑器(包含图片,视频上传)

    1. 引入插件(注意IE10以下不支持) npm install vue-quill-editor --savenpm install quill --save (Vue-Quill-Editor需要 ...

  6. Simditor 富文本编辑器

    Simditor 是团队协作工具 Tower 使用的富文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速 输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验 兼容的浏览器:IE1 ...

  7. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  8. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  9. markdown编辑器typora本地图片上传到自己的服务器

    typora是windows平台下最受欢迎的markdown书写工具和查看工具,本篇文章将会介绍如何在typora平台使用java脚本程序自动上传本地图片到自己的服务器,从而让markdown文章中的 ...

随机推荐

  1. 基于Ruby的watir-webdriver自动化测试方案与实施(三)

    接着基于Ruby的watir-webdriver自动化测试方案与实施(二) http://www.cnblogs.com/Javame/p/4159468.html 继续 ... ...   编写脚本 ...

  2. Java 压缩字符串

    1.引言 最近在做项目中,平台提供一个http服务给其他系统调用,然后我接收到其他系统的json格式的报文后去解析,然后用拿到的数据去调用corba服务,我再把corba的返回值封装完成json字符串 ...

  3. Poj 1029 分类: Translation Mode 2014-04-04 10:18 112人阅读 评论(0) 收藏

    False coin Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16418   Accepted: 4583 Descr ...

  4. pomelo初探

    最近发现了一个比较好玩的东西pomelo.地址:点击打开链接 这个东西是网易开发的一套基于node.js的高性能,分布式游戏服务器框架.这套框架不仅可以用来开发游戏服务器,也可用于开发高实时web应用 ...

  5. Http get方式url参数长度以及大小

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp69 众所周知, 传递小量参数(在没有其他原因,例如隐藏参数值的情况下)推 ...

  6. 出错:Cause: org.apache.ibatis.executor.ExecutorException: A query was run and no Result Maps were found for the Mapped Statement 'cn.mgy.mapper.UserMapper.findById'.

    详细出错代码: org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: org.a ...

  7. EDF转TXT,EDF转mat,rec转TXT eeg

    https://files.cnblogs.com/files/myohao/edfsample.zip

  8. XamarinEssentials教程设置首选项Preferences的值

    XamarinEssentials教程设置首选项Preferences的值 如果要对首选项的某一项的值进行设置时,可以通过Preferences类的Set()方法实现,该方法可以对指定键的值进行设置. ...

  9. iPad Air 2全然评測:可怕的三核CPU、六核GPU

    在了解了三核心A8X的基本情况后.我们再来通过測试数据,全面地了解一下iPad Air 2的性能表现,包含CPU.GPU.存储.电池.屏幕.摄像头.导航等等. [CPU性能測试:三核太可怕了] 移动处 ...

  10. php-elasticsearch bulk批量插入数据

    1.单条插入 <?php include '../vendor/Elasticsearch/autoload.php'; $a['hosts'] = array( #需要用户名时 http:// ...