<template>
<div class="wrap">
<div class="vm-editor">
<div class="wm-editor-menu">
<div class="vm-editor-button">
<span class="button">
<img src="../assets/images/img_icon.png" @click="change" alt="" srcset="">
</span>
<div class="vm-editor-dropdown" v-show="showInput">
<div class="add-img">
Add Image
<input type="file" accept="image/gif, image/jpeg, image/png" ref="file" @change="handleFileChange">
</div>
</div>
</div>
</div>
<div class="vm-editor-content" contenteditable="true" v-html="html" @input="onDivInput($event)" @focus="lock=true" @blur="lock=false"></div>
</div>
</div> </template> <script>
export default {
props: ['data'],
data() {
return {
html: this.data,
lock: false,
showInput: false
}
},
watch: {
'data'() {
if (!this.lock) {
this.html = this.data;
}
}
},
mounted() { },
methods: {
onDivInput: function(e) {
// this.html = e.target.innerHTML;
this.$emit('upload', e.target.innerHTML)
},
handleFileChange: function(e) {
this.showInput = false
var dom = this.$refs.file.files[0]
console.log(dom)
if(!dom){
return false;
}
var size = Math.floor(dom.size / 1024);
if (size > 10240) {
// 这里可以加个文件大小控制
this.$alert('请选择小于10M图片', '提示', {
confirmButtonText: '确定'
});
return false
}
var _this = this;
var params = new FormData();
params.append('file', dom);
this.$postImg('/upload/image',params).then(res => {
if(res.code == 0) {
document.execCommand('insertImage', false, res.data)
}else{ }
}).catch(err => {
console.log(err)
})
},
change: function() {
this.showInput = !this.showInput
}
}
}
</script> <style scoped>
.wrap .vm-editor{
background-color: #fff;
border-radius: 4px;
border: 1px solid #eeeff1;
min-width: 100px;
width: 95%;
overflow: hidden;
}
.wrap .vm-editor-content{
outline: 0;
height: calc(100% - 40px);
height: 160px;
text-align: left;
padding: 15px;
font-size: 16px;
overflow-y: scroll;
}
.wrap .wm-editor-menu{
width: 100%;
box-sizing: border-box;
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
background-color: #fafbfc;
border-bottom: 1px solid #eeeff1;
position: relative;
}
.wrap .vm-editor-button{
position: relative;
border-radius: 4px;
outline: 0;
cursor: pointer;
background-color: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5px;
padding: 0;
}
.vm-editor-button:first-child{
margin-left:0
}
.wrap .vm-editor-button span.button:hover{
background-color:#eee
}
.wrap .button{
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap .button img{
width: 16px;
height: 16px;
}
.wrap .vm-editor-dropdown{
position: absolute;
background: #fff;
left: 0;
top: 25px;
border-radius: 4px;
border: 1px solid #eeeff1;
box-shadow: 0 0 4px rgba(0,0,0,.05);
}
.wrap .add-img{
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
position: relative;
cursor: pointer;
}
.wrap .add-img input{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 4px;
height: 4px;
background-color: #F5F5F5;
} /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
border-radius: 3px;
background-color: #FFF;
} /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 3px;
background-color: #eeeff1;
}
</style>

VmEditor 组件 个人后台管理系统

<template>
<div class="wrap">
<div class="vm-editor">
<div class="wm-editor-menu">
<div class="vm-editor-button">
<span class="button">
<img src="../assets/images/img_icon.png" @click="change" alt="" srcset="">
</span>
<div class="vm-editor-dropdown" v-show="showInput">
<div class="add-img">
Add Image
<input type="file" accept="image/gif, image/jpeg, image/png" ref="file" @change="handleFileChange">
</div>
</div>
</div>
</div>
<div class="vm-editor-content" contenteditable="true" v-html="html" @input="onDivInput($event)" @focus="lock=true" @blur="lock=false"></div>
</div>
</div>
 
</template>
<script>
export default {
props: ['data'],
data() {
return {
html: this.data,
lock: false,
showInput: false
}
},
watch: {
'data'() {
if (!this.lock) {
this.html = this.data;
}
}
},
mounted() {
 
},
methods: {
onDivInput: function(e) {
// this.html = e.target.innerHTML;
this.$emit('upload', e.target.innerHTML)
},
handleFileChange: function(e) {
this.showInput = false
var dom = this.$refs.file.files[]
console.log(dom)
if(!dom){
return false;
}
var size = Math.floor(dom.size / );
if (size > ) {
// 这里可以加个文件大小控制
this.$alert('请选择小于10M图片', '提示', {
confirmButtonText: '确定'
});
return false
}
var _this = this;
var params = new FormData();
params.append('file', dom);
this.$postImg('/upload/image',params).then(res => {
if(res.code == ) {
document.execCommand('insertImage', false, res.data)
}else{
 
}
}).catch(err => {
console.log(err)
})
},
change: function() {
this.showInput = !this.showInput
}
}
}
</script>
<style scoped>
.wrap .vm-editor{
background-color: #fff;
border-radius: 4px;
border: 1px solid #eeeff1;
min-width: 100px;
width: 95%;
overflow: hidden;
}
.wrap .vm-editor-content{
outline: ;
height: calc(100% - 40px);
height: 160px;
text-align: left;
padding: 15px;
font-size: 16px;
overflow-y: scroll;
}
.wrap .wm-editor-menu{
width: 100%;
box-sizing: border-box;
display: flex;
height: 40px;
align-items: center;
padding: 15px;
background-color: #fafbfc;
border-bottom: 1px solid #eeeff1;
position: relative;
}
.wrap .vm-editor-button{
position: relative;
border-radius: 4px;
outline: ;
cursor: pointer;
background-color: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
padding: ;
}
.vm-editor-button:first-child{
margin-left:
}
.wrap .vm-editor-button span.button:hover{
background-color:#eee
}
.wrap .button{
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap .button img{
width: 16px;
height: 16px;
}
.wrap .vm-editor-dropdown{
position: absolute;
background: #fff;
left: ;
top: 25px;
border-radius: 4px;
border: 1px solid #eeeff1;
box-shadow: 4px rgba(,,,.05);
}
.wrap .add-img{
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
position: relative;
cursor: pointer;
}
.wrap .add-img input{
width: 100%;
height: 100%;
position: absolute;
left: ;
top: ;
opacity: ;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 4px;
height: 4px;
background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
border-radius: 3px;
background-color: #FFF;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 3px;
background-color: #eeeff1;
}
</style>

后台编辑器组件VmEditor的更多相关文章

  1. dede5.7 GBK 在php5.4环境下 后台编辑器无法显示文章内容

    问题的原因是:是htmlspecialchars,PHP 5.4后GBK编码下默认不支持中文,转换后内容为空,UTF-8编码没有任何问题.   解决方法如下: 在\include\ckeditor\c ...

  2. iwms后台编辑器无法粘贴word格式的解决方法

    iwms后台编辑器用的是tiny_mce,默认会自动过滤word粘贴中的格式,以减小数据库的占用,但在word中辛苦做的字体和格式都不见了,可采用下方法关闭编辑器的自动清除格式功能. 编辑文件:\ti ...

  3. 让织梦CMS的后台编辑器支持优酷视频

    最近做了一些视频教程传到优酷网站上,但我想引入这些视频教程到我的网站,在发表时我发现织梦CMS自带的编辑器又不直接支持优酷等视频网站的引用.所以为了方便教程的发布,特意在网站搜索到本篇教程,详细讲解如 ...

  4. dede后台编辑器更改

    1.下载百度开发的UEditor编辑器(对应版本): 2. 解压下载的zip文件: 3.将解压后得到的文件夹拷贝到您网站目录下的include文件夹下并改名为ueditor: 4.将inc文件夹里边的 ...

  5. 基于bootstrap的文本编辑器组件:Summernote

    Summernote官网地址 :https://summernote.org/ 这是官网的一个例子: <!DOCTYPE html> <html lang="en" ...

  6. 基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用

    工作中遇到了一个需要做图文详情 的富文本编辑的需求, 于是基于 React-draft-wysiwyg 实现了一个 纯组件, 目前支持 常规文本输入 外部链接图片 以及本地上传图片, 由于是纯组件, ...

  7. 将dedecms织梦后台编辑器ckeditor更换为kindeditor,并高亮显示代码

    1.下载kindeditor,并解压到kindeditor目录,把kindeditor目录复制到dede的include目录下(ps:修改kindeditor-all-min.js.lang文件夹下z ...

  8. 120行代码打造.netcore生产力工具-小而美的后台异步组件

    相信绝大部分开发者都接触过用户注册的流程,通常情况下大概的流程如下所示: 接收用户提交注册信息 持久化注册信息(数据库+redis) 发送注册成功短信(邮件) 写操作日志(可选) 伪代码如下: pub ...

  9. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

随机推荐

  1. 一个极其简易版的vue.js实现

    前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...

  2. 代码漏洞扫描描述Cross Site History Manipulation解决办法[dongcoder.com]

    代码漏洞扫描 漏洞描述:Cross Site History Manipulation 简要描述:产品的行为差异或发送不同的反应,在某种程度上暴露了与安全性相关的产品状态,例如特定的操作是否成功.可能 ...

  3. C语言volatile关键字的用法

    volatile关键字的意义在于让被关键字修饰的变量每次使用时都重新去主内存里读取变量,而不是从高速缓存去读取. int a = 1; 普通变量定义之后,若要使用它,都会 先把它的值从主内存拷贝到高速 ...

  4. function "round" declared implicitly

    keil工程代码,浮点计算中引用了数学库 math.h 中的round函数,但编译时出现告警 “warning:  #223-D: function "round" declare ...

  5. AutoCAD神器! AutoCAD自动切换中英文输入法插件(ZDSRF)

    AutoCAD神器! AutoCAD自动切换中英文输入法插件 (一)功能特点: CAD命令中只能输入英文字符,不能输入中文,在文字编辑.文字输入.尺寸编辑中经常需要输入中文,此时就需要频繁的切换输入法 ...

  6. 解决github下载速度慢的问题 ,亲测有效

    原文链接 https://blog.csdn.net/tsq292978891/article/details/78260066 解决办法: 手动更改hosts 关于hosts的作用这里就不做声明了. ...

  7. 随机模块_random

    random.seed(a) 设置种子, 若不穿参数, 就使用系统时间种子相同, 每次生成的随机序列也相同计算机生成的随机数都是伪随机数, 通过算法的出 li = [] # 设置种子 random.s ...

  8. List<Map<String, Object>>集合中获取某个key并转换为List<Integer>集合

    package com.codyy.sso.controller.yuanqu; import java.util.ArrayList; import java.util.HashMap; impor ...

  9. c#+CAD动态移动效果

    public class MoveRotateScaleJig : DrawJig { public static List<Entity> entities = new List< ...

  10. [STM32F103]定时器中断

    l 使能定时器时钟. RCC_APB1PeriphClockCmd(); l 初始化定时器,配置ARR,PSC. TIM_TimeBaseInit(); l 开启定时器中断,配置NVIC. void ...