1.0.3 • Published 5 months ago
tinymce_ryl v1.0.3
tinymce_ryl
自定义通用的组件
Build Setup
# install dependencies
# npm install
# 所有子方法
# 1.富文本 -- handTinymce
<handTinymce
id="myEditor" //唯一容器id
:height="400" // 默认400
v-model="content"
placeholder="请输入内容" // 默认文案:请输入内容
:uploadType="'initUpload'" // 图片上传方式 默认:base64 自定义上传:initUpload
url="/static" // 插件和汉化包路径,默认 /static
@handleImgUpload="handleImgUpload" // 如果是自定义上传,这个方法接收3个参数,如下:
toolbar="bold italic underline strikethrough link alignleft aligncenter alignright forecolor backcolor image table styleselect fontselect fontsizeselect preview removeformat fullscreen"
/>
# 切记,如果要使用该富文本,则要先手动引入如下配置:
# // import "tinymce/icons/default/icons";
# // import "tinymce/themes/silver";
# // // 引入富文本编辑器主题的js和css
# // import "tinymce/themes/silver/theme.min";
# // import "tinymce/skins/ui/oxide/skin.min.css";
# // // 扩展插件
# // import "tinymce/plugins/image";
# // import "tinymce/plugins/link";
# // import "tinymce/plugins/table";
# // import "tinymce/plugins/fullscreen";
# // import "tinymce/plugins/paste";
# // import "tinymce/plugins/preview";
# // import "tinymce/plugins/hr";
# handleImgUpload(blobInfo, success, failure){
# let formdata = new FormData();
# formdata.append("image", blobInfo.blob());
# axios({
# method: "post",
# url: process.env.VUE_APP_BASE_URL + "/admin/common/upload",
# headers: {
# Authorization: "Bearer " + this.$cookieGet("TOKEN")
# },
# data: formdata,
# }).then((res) => {
# if (res.data.code != 200) {
# failure("操作提示: " + res.msg);
# return;
# }
# success(res.data.data.imageUrl);
# });
# }
# 对应的其他方法:
# setContent() 设置值
# getContent() 获取值
# serve with hot reload at localhost:8080
# npm run dev
# build for production with minification
# npm run build
#1.0.3:
For detailed explanation on how things work, consult the docs for vue-loader.