富文本编辑器Simditor
文档地址:https://simditor.tower.im/docs/doc-usage.html
父组件:
options: {
placeHolder: 'this is placeHolder',
toolbarFloat: false,
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
pasteImage: true,
upload: {
url: config.baseUrl + `sys/policy/uploadPics`, // 文件上传的接口地址(这个工具后端给的接口填写)
params: { token: getToken('access_token') }, // (这是额外的参数)键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
fileKey: 'files', // 服务器端获取文件数据的参数名
connectionCount: ,
leaveConfirm: '正在上传文件'
}
}
富文本编辑器组件:
<template>
<div class="simditor">
<textarea :id="id"></textarea>
</div>
</template>
<script>
import Simditor from 'simditor'
import $ from 'jquery'
import 'simditor/styles/simditor.css'
import config from '@/config/index' export default {
name: 'lin-ueditor',
props: {
options: { // 配置参数
type: Object,
default() {
return {}
}
},
policyContent: {
type: String,
default: ''
}
},
data () {
return {
id: new Date().getTime(), // 这是为了在同一个组件里放多个富文本编辑器,而加的标记
editor: ''
}
},
mounted () {
let vm = this
this.editor = new Simditor(Object.assign({}, {
textarea: $(`#${vm.id}`)
}, this.options))
// 不知道干什么的
this.editor.on('valuechanged', (e, src) => {
this.valueChange(e, src)
})
// 修改上传后图片的路径
this.editor.uploader.on('uploadsuccess', function(e, file, result) {
var $img, $mask, msg
if (!file.inline) {
return
}
$img = file.img
$img.removeData('file')
$img.removeClass('uploading')
$mask = $img.data('mask')
if ($mask) {
$mask.remove()
}
$img.removeData('mask')
if (result.success === false) {
msg = result.msg || '上传被拒绝了'
this.$message.error(msg)
$img.attr('src', this.defaultImage)
} else {
// 修改图片路径和样式
$img.attr({
src: config.baseUrl + result.file_path, // 路径
width: ,
height:
}) // 这里就是成功后的替换,将这个改成了我们所使用的字段名file
}
}
)
this.setContentValue(this.policyContent)
},
methods: {
// 获取富文本编辑器的值
valueChange(e, val) {
this.$emit('editorContentValue', this.editor.getValue())
},
// 给富文本编辑期赋值
setContentValue (val) {
this.editor.setValue(val)
}
}
}
</script> <style scoped> </style>
富文本编辑器Simditor的更多相关文章
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
- Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
- Simditor 富文本编辑器
Simditor 是团队协作工具 Tower 使用的富文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速 输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验 兼容的浏览器:IE1 ...
- C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...
- 给Django后台富文本编辑器添加上传文件的功能
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...
- 富文本编辑器-SpringBoot
目录 简介 Editor.md 基础工程搭建 数据库设计 基础项目搭建 文章编辑整合(重点) 图片上传问题 表情包问题 文章展示 简介 项目地址:https://gitee.com/zwtgit/ri ...
- 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
随机推荐
- 科研画图:散点连接并平滑(基于Matlab和Python)
导师要求参照别人论文中的图(下图),将其论文中的图画美观些,网上关于科研画图相关的代码比较少,就自己鼓捣了下. 附上自己整合验证过的代码: 功能:将散点连接并平滑 1)Matlab 效果图: x1=[ ...
- Java面试题的个人总结
面试总结 第一轮:电话初面 第二轮:技能面谈[技能职位尽量避免多谈处理上的作业] 第三轮:高管复试 第四轮:HR终究供认 一面:首要供认对阿里的意向度(假定异地更会考虑对作业地址(杭州)的意向度!阿里 ...
- CentOS下yum方式安装FFmpeg
FFmpeg一个完整的跨平台解决方案,用于记录,转换和流式传输音频和视频. 文档:https://www.ffmpeg.org/documentation.html FFmpeg安装 1.安装Nux ...
- 从Python安装到语法基础,这才是初学者都能懂的爬虫教程
Python和PyCharm的安装:学会Python和PyCharm的安装方法 变量和字符串:学会使用变量和字符串的基本用法 函数与控制语句:学会Python循环.判断语句.循环语句和函数的使用 Py ...
- Python画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成喔~)one 樱花树 动态生成樱花效果图(这个是动态的) ...
- 大话设计模式Python实现-组合模式
组合模式(Composite Pattern):将对象组合成成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 下面是一个组合模式的demo: #!/us ...
- IT兄弟连 Java语法教程 赋值运算符
从本书之前的内容中就一直在使用赋值运算符.现在是正式介绍赋值运算符的时候了.赋值运算符是单个等号”=“.在Java中,赋值运算符的工作方式与所有其它计算机语言相同.它的一般形式如下: var = ex ...
- oracle多表关联update
日常的开发中一般都是写的单表update语句,很少写多表关联的update. 不同于SQL Server,在Oracle中,update的多表连接更新和select的多表连接查询在使用的方法上存在较大 ...
- .net core 的 aop 实现方法汇总
decorator 不借助第三方DI容器,通过装饰模式通过内置的DI容器实现 https://medium.com/@willie.tetlow/net-core-dependency-injecti ...
- oracle学习笔记(十六) PL/SQL 异常和goto语句
PL/SQL 异常和goto语句 异常 预定义异常 oracle常见预定义异常: 错误号 异常错误信息名称 说明 ORA-0001 DUP_VAL_ON_INDEX 试图破坏一个唯一性限制 ORA-0 ...