富文本编辑器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的.效 ...
随机推荐
- windows下redis作为系统服务如何重启
第一种方法: 键入win+R打开运行对话框,键入Services.msc打开windows服务窗口,找到redis服务,先停止该服务,然后再启动 第二种方法: 键入win+R打开运行对话框,键入cmd ...
- C++ 的 +,加号重载示例
#include <iostream> // overloading "operator + " // 要考虑加法的形式 // a+1 // a+a // 1+a // ...
- MySQL数据库实战之优酷
目录 一.项目总结三步骤 二.项目需求分析 三.搭建框架 四.ORM框架分析 五.数据库设计 六.项目中各个功能模块分析 七.项目中遇到的问题及怎么解决的 八.客户端代码框架 8.1 conf 8.1 ...
- golang--海量用户即使通讯系统
功能需求: 用户注册 用户登录 显示在线用户列表 群聊 点对点聊天 离线留言
- 手把手教你如何用 OpenCV + Python 实现人脸检测
配好了OpenCV的Python环境,OpenCV的Python环境搭建.于是迫不及待的想体验一下opencv的人脸识别,如下文. 必备知识 Haar-like Haar-like百科释义.通俗的来讲 ...
- python-12-字典的嵌套与int快速排序
前言 字典的增删改查我们都有一定的认识与了解啦,但是字典也可以嵌套列表.字典.元组等数据结构. 一.字典的嵌套 1.修改.添加 dic = { "name": ["lin ...
- 详解JAVA8函数式接口{全}
1: 函数式接口 1.1 概念 1.2 格式 1.3@FunctionalInterface注解 1.4 调用自定义函数接口 2:函数式编程 2.1:lambda的延迟执行 2.2 使用Lambda作 ...
- vue 渐变 进度条 progress
废话 不多少说 ,直接上代码 新建文件 gradual-progress.vue <!-- * @Author: gfc * @Date: 2019-11-07 14:00:11 * @Last ...
- STN(Spatial Transformer Networks)
url: https://arxiv.org/abs/1506.02025 year:2015 blog: https://kevinzakka.github.io/2017/01/10/stn-pa ...
- PHPStorm使用PHP7新特性出现红色波浪错误
今天在项目中使用PHP7新特性时PHPStorm出现了如下红色错误,看着让人很不舒服,明明没有错 本地配置LNMP的PHP版本是7.2所以不是安装的PHP版本过低的问题,而是PHPStorm默认支持的 ...