正文 

当前位置： 首页 > java > java教程

simditor富文本编辑器多选图片上传视频连接插入(代码片段)

zmdcomeon zmdcomeon     2023-03-03     368

关键词：

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

技术分享图片

一些可选的选项：

  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富文本编辑器

Simditor是团队协作工具Tower使用的富文本编辑器。相比传统的编辑器它的特点是：    功能精简，加载快速    输出格式化的标准HTML    每一个功能都有非常优秀的使用体验   &... 查看详情

富文本编辑器quill上传图片与视频

image与video在Quillformats中属于Embeds，要在富文本中插入图片或者视频需要使用insertEmbedapi。insertEmbedinsertEmbed(index:Number,type:String,value:any,source:String=‘api‘):Delta插入图片需要位置，内容类型以及图片的url：quill.insertEmbed(10,‘image‘,... 查看详情

后台产品设计之编辑器

...多精彩可以点击下方链接查看。后台产品设计指南富文本编辑器富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于OfficeWord的编辑功能，可以帮助用户快速地添加文字、图片、表格等内容并设置格式... 查看详情

百度富文本编辑器ueditor自定义上传图片接口

如下图： 然后修改ueditor.all.js   查看详情

tinymce-vue5富文本的实现(代码片段)

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。tiny中文文档：http://tinymce.ax-z.cn/本文介绍如何在vue项目中，使用TinyMCE实现富文本基本功... 查看详情

富文本编辑器handyeditor，上传和预览图片的host地址不一样(代码片段)

使用富文本编辑器(官网)时，大多时候都会用到图片上传，但是下载的富文本编辑器的默认配置是只有一个上传地址的host的。varhe=HE.getEditor(‘editor‘,autoHeight:true,autoFloat:false,topOffset:0,uploadPhoto:true,uploadPhotoUrl:uploadDomain,uploadPhotoHan... 查看详情

ueditor富文本编辑器跨域上传图片解决办法(代码片段)

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的... 查看详情

使用百度umeditor富文本编辑器，修改自定义图片上传，修改源码

富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用UEDITOR：百度开发的插件，lite版是UMEasyUI编... 查看详情

wangedit富文本编辑器增加上传视频功能(代码片段)

...司接到了了一个新的需求就是可以把项目的一个富文本的编辑器可以设置为能够上传视频于是乎就要对vue里面的这个组件进行操作了首先我们可以看一眼官网的文档需要用到的就直接到官网文档进行查询即可了 需求（接口文... 查看详情

ckeditor富文本编辑器踩坑-上传视频后无法删除视频和获取鼠标编辑状态光标(代码片段)

问题描述在CKEditor富文本编辑器中成功上传视频后，如果视频前后没有任何内容，视频无法使用退格键正常删除并且在文本框内无法获取鼠标编辑状态光标。修复办法在创建的Video标签后添加一个换行标签即可代码如下<... 查看详情

vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：

//预览<divclass="htmlViewBox"> <pv-html="activity_html_defaultMsg"v-show="htmlDefaultMsg"></p> <pv-show="defaultMsg==‘‘&&htmlDefaultMsg==‘‘">请在富文本编辑器内容</p></div& 查看详情

editor富文本编辑器配置不含图片上传

一，下载地址：http://ueditor.baidu.com/website/download.html　　1）根据需要下载相应版本　　　例 Java：选择jsp+utf-8；二，放置在项目中　　1）解压下载文件，并重命名为editor；　　2）复制文件放置在项目webapp目录下；　　3）把edi... 查看详情

用mvc框架中页面用的jquery，在使用dialog是使用tinymce的图片上传以及富文本编辑器，

图片上传的时候，是路径不对，找不到页面。在使用富文本编辑器时编辑框上面的编辑器出不来。参考技术A不是很明白你的问题TinyMce我没有用过，还有，上传图片和dialog是什么样的关系？你是用dialog预览还是用于上传后显示？ 查看详情

kindeditor富文本框编辑器上传图片功能实现，基于java项目

1.HTML标签与jquery代码<textareaid="editor_id"style="width:200px;height:200px;"></textarea><scripttype="text/javascript"src="../js/jquery.min.js"></script> <scripttype="text/javas 查看详情

Summernote富文本编辑器-限制图片高于特定高度和宽度

】Summernote富文本编辑器-限制图片高于特定高度和宽度【英文标题】：Summernoterichtexteditor-restrictimageaboveparticularheightandwidth【发布时间】：2021-11-2822:58:46【问题描述】：当我在编辑器中上传图片时，我可以找到它的大小。但我希望... 查看详情

simditor用法

...面所吸引。Simditor是Tower开源的所见即所得的在线富文本编辑器。Simditor的理念是保持简单,避免过度的功能,每个特性都追求极致的用户体验。用法1、在你的html页面中引用例如以下文件<linkmedia="all"rel="stylesheet"type="text/css"href="sim... 查看详情

tinymce-vue富文本整合，实现图片视频上传功能(代码片段)

之前系统富文本编辑器为百度的UEditor，但该插件已停止维护多年，存在开发风险，因此使用TinyMce来替换和扩展业务功能。一、Demo演示二、封装步骤1、安装tinymce-vue注：Vue2.x下载3.x版本的tinymce-vue，Vue3下载4.x... 查看详情

移动端预览（双指缩放移动）富文本编辑器上传的图片(代码片段)

通过使用vue-photo-preview插件，实现移动端图片的预览，全屏等功能。1.安装插件npminstallvue-photo-preview--save2.main引入importpreviewfrom'vue-photo-preview'import'vue-photo-preview/dist/skin.css'Vue.use 查看详情