Skip to content

A
admin-base
Commit 2c6b284d authored by chenfenglei's avatar chenfenglei
Browse files
Options

富文本

parent e8064663
Show whitespace changes
Inline Side-by-side
Showing with 463 additions and 5 deletions
src/components/shop/dialog.vue
View file @ 2c6b284d
...@@ -246,14 +246,16 @@ ...@@ -246,14 +246,16 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="商品详情"> <el-form-item label="商品详情">
<el-input type="textarea" :rows="25" v-model="form.desc.detail"></el-input> <!-- <el-input type="textarea" :rows="25" v-model="form.desc.detail"></el-input> -->
<editor :lookData="msg"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="购买须知"> <el-form-item label="购买须知">
<el-input type="textarea" :rows="25" v-model="form.desc.qa"></el-input> <!-- <el-input type="textarea" :rows="25" v-model="form.desc.qa"></el-input> -->
<edi />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -270,11 +272,17 @@ ...@@ -270,11 +272,17 @@
<script> <script>
import {getLessonApi,addGoodsApi,editGoodsApi,getGoodsDetailApi,uploadFileApi,getGoodsListApi} from "../../service/api"; import {getLessonApi,addGoodsApi,editGoodsApi,getGoodsDetailApi,uploadFileApi,getGoodsListApi} from "../../service/api";
import {TEACHERTYPE,GOODSTYPE} from "../../util/wordbook"; import {TEACHERTYPE,GOODSTYPE} from "../../util/wordbook";
import editor from "./editor"
import edi from "./edi"
export default { export default {
name: "dialogObj", name: "dialogObj",
props:[ props:[
'dialogObj' 'dialogObj',
], ],
components: { // 引入组件
editor,
edi
},
filters: { filters: {
filterGoods(val){ filterGoods(val){
return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
...@@ -282,6 +290,15 @@ ...@@ -282,6 +290,15 @@
}, },
data(){ data(){
return{ return{
msg:{
a:""
},
tiny:{
height:300
},
sendObj:{
content:'nihao'
},
loading:true, loading:true,
goodsYou:[], goodsYou:[],
goodsList:[], goodsList:[],
...@@ -324,6 +341,10 @@ ...@@ -324,6 +341,10 @@
}, },
methods:{ methods:{
sub(){ sub(){
console.log(tinymce.get('tinymce').getContent())
this.form.desc.detail=tinymce.get('tinymce').getContent()
this.form.desc.qa=tinymce.get('tinymce1').getContent()
console.log(tinymce.get('tinymce1').getContent())
let _json = JSON.parse(JSON.stringify(this.form)+''); let _json = JSON.parse(JSON.stringify(this.form)+'');
if(_json.goods_type === 3 || _json.goods_type === 4 ){ if(_json.goods_type === 3 || _json.goods_type === 4 ){
_json.course_id=0; _json.course_id=0;
......
src/components/shop/edi.vue 0 → 100644
View file @ 2c6b284d
<template>
<div class='tinymce1'>
<editor id='tinymce1' v-model='lookData1' :init='init'></editor>
<div>
<!-- <div class="imgInter" @click="showDialog1()">插入图片</div> -->
</div>
<el-dialog
title="插入图片"
:visible.sync="dialogVisible1"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="图片">
<el-upload
action="/api/public/upload"
:http-request="uploadFile"
:on-remove="removeFile"
:before-upload="beforeAvatarUploadImg"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="form.imgList1">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传png或jpg文件，且不超过150kb</div>
</el-upload>
</el-form-item>
<el-form-item label="铺满">
<el-switch
v-model="form.big">
</el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch
v-model="form.center">
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible1 = false">取 消</el-button>
<el-button type="primary" @click="imgInter">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/media'
import {uploadFileApi} from "../../service/api";
export default {
name: 'tinymce1',
props:[
'lookData1'
],
data () {
return {
radio:[],
imageType:false,
form:{
imgList1:[],
big:false,
weight:'',
center:true
},
show:'',
dialogVisible1:false,
init: {
toolbar:'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | ',
language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray',
height: 500,
plugins: 'preview textpattern colorpicker lists code colorpicker fullpage textcolor wordcount contextmenu media',
branding: false
}
}
},
activated(){
this.show = true
},
deactivated(){
},
mounted () {
},
methods:{
beforeAvatarUploadImg(file){
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' );
const isLt2M = file.size / 1024 < 150;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 150KB!');
}
return isJPG && isLt2M;
},
imgInter(){
if(this.form.imgList1.length < 1){
this.$message({
type: 'error',
message: '请选择图片'
});
return false
}
let ImageStyle = '';
if(this.form.big){
ImageStyle += 'width:100%;'
}else{
ImageStyle += 'width:70%'
}
if(this.form.center){
ImageStyle = 'display:block;margin:auto'
}
let str= `<img src="${this.form.imgList1[0].url}" style="${ImageStyle}"/>`;
this.insertContent(str)
this.dialogVisible1 = false
},
uploadFile(a){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.form.imgList1 = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
})
},
showDialog1(){
this.dialogVisible1 = true;
this.form={
imgList1:[],
big:false,
weight:'',
center:true
}
},
insertContent(content) {
if (!content) {//如果插入的内容为空则返回
return;
}
let sel = null;
if (document.selection) {//IE9以下
sel = document.selection;
sel.createRange().pasteHTML(content);
} else {
sel = document.getElementById('tinymce_ifr').contentWindow.getSelection();
if (sel.rangeCount > 0) {
let range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
let el = document.createElement("div"); //创建一个空的div外壳
el.innerHTML = content; //设置div内容为我们想要插入的内容。
let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树
let node = el.firstChild;
let lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
let contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
},
removeFile(){},
handleExceed(){}
},
created:function(){
tinymce.init({})
},
components: {Editor}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.tinymce{
position: relative;
.clear-both;
.imgInter{
position: absolute;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 330px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
line-height: 1.4;
margin: 0 5px;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
}
}
}
</style>
src/components/shop/editor.vue 0 → 100644
View file @ 2c6b284d
<template>
<div class='tinymce'>
{{lookData.a}}
<editor id='tinymce' v-model='lookData.a' :init='init'></editor>
<div>
<div class="imgInter" @click="showDialog()">插入图片</div>
</div>
<el-dialog
title="插入图片"
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="图片">
<el-upload
action="/api/public/upload"
:http-request="uploadFile"
:on-remove="removeFile"
:before-upload="beforeAvatarUploadImg"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="form.imgList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传png或jpg文件，且不超过150kb</div>
</el-upload>
</el-form-item>
<el-form-item label="铺满">
<el-switch
v-model="form.big">
</el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch
v-model="form.center">
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="imgInter">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/media'
import {uploadFileApi} from "../../service/api";
export default {
name: 'tinymce',
props:[
'lookData'
],
data () {
return {
radio:[],
imageType:false,
form:{
imgList:[],
big:false,
weight:'',
center:true
},
show:'',
dialogVisible:false,
init: {
toolbar:'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | ',
language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray',
height: 500,
plugins: 'preview textpattern colorpicker lists code colorpicker fullpage textcolor wordcount contextmenu media',
branding: false
}
}
},
activated(){
this.show = true
},
deactivated(){
},
mounted () {
},
methods:{
beforeAvatarUploadImg(file){
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' );
const isLt2M = file.size / 1024 < 150;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 150KB!');
}
return isJPG && isLt2M;
},
imgInter(){
if(this.form.imgList.length < 1){
this.$message({
type: 'error',
message: '请选择图片'
});
return false
}
let ImageStyle = '';
if(this.form.big){
ImageStyle += 'width:100%;'
}else{
ImageStyle += 'width:70%'
}
if(this.form.center){
ImageStyle = 'display:block;margin:auto'
}
let str= `<img src="${this.form.imgList[0].url}" style="${ImageStyle}"/>`;
this.insertContent(str)
this.dialogVisible = false
},
uploadFile(a){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.form.imgList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
})
},
showDialog(){
this.dialogVisible = true;
this.form={
imgList:[],
big:false,
weight:'',
center:true
}
},
insertContent(content) {
if (!content) {//如果插入的内容为空则返回
return;
}
let sel = null;
if (document.selection) {//IE9以下
sel = document.selection;
sel.createRange().pasteHTML(content);
} else {
sel = document.getElementById('tinymce_ifr').contentWindow.getSelection();
if (sel.rangeCount > 0) {
let range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
let el = document.createElement("div"); //创建一个空的div外壳
el.innerHTML = content; //设置div内容为我们想要插入的内容。
let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树
let node = el.firstChild;
let lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
let contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
},
removeFile(){},
handleExceed(){}
},
created:function(){
tinymce.init({})
},
components: {Editor}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.tinymce{
position: relative;
.clear-both;
.imgInter{
position: absolute;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 330px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
line-height: 1.4;
margin: 0 5px;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
}
}
}
</style>
src/components/weChat/weChatResource.vue
View file @ 2c6b284d
...@@ -315,10 +315,10 @@ ...@@ -315,10 +315,10 @@
float: right; float: right;
} }
.title { .title {
font-size: 16px; /* font-size: 16px; */
font-weight: 400; font-weight: 400;
display: block; display: block;
line-height: 1.2; /* line-height: 1.2; */
color: #353535; color: #353535;
} }
.digest { .digest {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment