比较完整的vue调用tinymce组件等
1.首先npm,看tinymce的版本,刚开始用的tinymce-vue版本比较高,出现一些问题,也不知道是版本问题还是下载的时候包损坏有问题,后来降成这个版本,就ok了。2.然后建立一个 被封装的独立组件(相当于子组件),可以后续被各个父组件调用,我们命名为mytinymce.vue3.先看在应用页面,调用mytinymce的结果4.具体来看父子组件代码4.1子组件代码(含图片上传,服务器采用p
·
1.首先npm,看tinymce的版本,刚开始用的tinymce-vue版本比较高,出现一些问题,也不知道是版本问题还是下载的时候包损坏有问题,后来降成这个版本,就ok了。
2.然后建立一个 被封装的独立组件(相当于子组件),可以后续被各个父组件调用,我们命名为mytinymce.vue
3.先看在应用页面,调用mytinymce的结果
4.具体来看父子组件代码
4.1子组件代码(含图片上传,服务器采用php)
<template>
<div class="tinymce">
<!-- <h1>tinymce</h1> -->
<editor id="tinymce" :init="init" v-model="tinymceHtml"></editor>
</div>
</template>
<script>
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default"; //引入编辑器图标icon,不引入则不显示对应图标
import "tinymce/plugins/image";
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/colorpicker";
import "tinymce/plugins/textcolor";
export default {
name: "tinymce",
props: {
//tinyvalue首先在父组件中定义,用于向本子组件mytinymce发送数据
//然后在这里声明,用于本子组件接收父组件数据
tinyvalue: {
type: String,
default: "",
},
},
data() {
return {
// 子组件的数据变量,默认未父组件传递过来的数据
tinymceHtml: this.tinyvalue,
// tinymce默认配置参数,含插件,请注意插件路径,如果错误容易保unexpect token ','之类错误
init: {
relative_urls: true,
language_url: "../../tinymce/zh_CN.js",
language: "zh_CN",
skin_url: "../../tinymce/skins/ui/oxide-dark",
height: 300,
plugins:
"link lists image code table colorpicker textcolor wordcount contextmenu",
toolbar:
"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
branding: false,
// 增加下面的images_upload_handler对象,能够支持上传图片到服务器
images_upload_handler: (blobInfo, success, failure) => {
if (blobInfo.blob().size / 1024 / 1024 > 5) {
failure("上传失败,图片大小请控制在 5M 以内");
} else {
let params = new FormData();
params.append("file", blobInfo.blob());
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
//aixo的声明在全局main.js中,这里不粘贴了
this.$http
.post(`http://localhost/hx/upload.php`, params, config)
.then((res) => {
console.log(res.data.up);
// success(res.data.up);
if (res.data.up != "") {
success("http://localhost/hx/" + res.data.up); //上传成功,在成功函数里填入图片路径
} else {
failure("上传失败");
}
})
.catch(() => {
failure("上传出错,服务器开小差了呢");
});
}
},
},
};
},
mounted() {
//初始化加载配置项
tinymce.init({});
},
methods: {},
//声明最原始的tinymce组件
components: { Editor },
watch: {
//监听内容变化,用于辅助父子组件之间的通讯
tinyvalue(newValue) {
//tinyvalue是父组件代理人,父组件值一旦变化,推送给子组件
this.tinymceHtml = newValue;
},
tinymceHtml(newValue) {
//tinymceHtml是子组件的值,如果改变,直接反馈给父组件
// tinymceinput是父组件中的用于接收子组件的事件(名称写死,用于后面调用)
this.$emit("tinymceinput", newValue);
},
},
};
</script>
4.2父组件代码
<template>
<div>
<el-card class="box-card">
<div class="title">tinymce的测试案例</div>
<mytinymce
:tinyvalue="fathertinyvalue"
@tinymceinput="gettinymceinput"
></mytinymce>
<br />
<br />
<button @click="gettinyvalue">子组件tinymce输入改变影响父组件</button>
<button @click="puttinytext">父组件获得的值放入tinymce</button>
</el-card>
</div>
</template>
<script>
import mytinymce from "@/components/mytinymce.vue";
export default {
data() {
return {
fathertinyvalue: "这是父组件的数据",
};
},
components: {
//声明经过封装后的tinymce组件,集成了图片上传、皮肤、各种插件等
mytinymce,
},
computed: {},
methods: {
//=====================================================
//父组件的button获得子组件tinymce的内容
//=====================================================
gettinyvalue() {
console.log(this.fathertinyvalue, "看实时变动的父组件获取的数据");
},
//=====================================================
//子组件tinymce输入框内容发生变动--引起父组件获得值发生变动
//=====================================================
gettinymceinput(val) {
this.fathertinyvalue = val;
// console.log(this.fathertinyvalue, "看实时变动的父组件获取的数据");
},
//=====================================================
//父组件给子组件tinymce赋值(初始化),例如从数据库获取值,放入tiny,用于修改
//=====================================================
puttinytext() {
this.fathertinyvalue = "从数据库获取的 值放入子组件:tinymce";
},
},
};
</script>
<style lang='css' scoped>
.title {
margin-bottom: 40px;
text-align: center;
font-size: 20px;
}
</style>
4.3php服务器接收4.1子组件上传图片的代码
<?php
require_once 'init.php';
$upfile = $_FILES['file'];
function upload_file($files, $path = "upload", $imagesExt = ['jpg', 'png', 'jpeg','pdf', 'gif', 'mp4'])
{
// 判断错误号
if (@$files['error'] == 00) {
// 判断文件类型
$ext = strtolower(pathinfo(@$files['name'], PATHINFO_EXTENSION));
if (!in_array($ext, $imagesExt)) {
return "非法文件类型";
}
// 判断是否存在上传到的目录
if (!is_dir($path)) {
mkdir($path, 0777, true);
}
// 生成唯一的文件名
$fileName = md5(uniqid(microtime(true), true)) . '.' . $ext;
// 将文件名拼接到指定的目录下
$destName = $path . "/" . $fileName;
// 进行文件移动
if (!move_uploaded_file($files['tmp_name'], $destName)) {
return $destName;
}
return $destName;
} else {
// 根据错误号返回提示信息
switch (@$files['error']) {
case 1:
echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
break;
case 2:
echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;
case 3:
echo "文件只有部分被上传";
break;
case 4:
echo "没有文件被上传";
break;
case 6:
case 7:
echo "系统错误";
break;
} }
}
$arr['up']=upload_file($upfile);
echo json_encode($arr);
图片效果:
1.
2.
更多推荐
已为社区贡献1条内容
所有评论(0)