0.1.14 • Published 9 months ago

custom-web-editor v0.1.14

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

custom-web-editor

Install

npm i custom-web-editor

Usage

// 在vue文件main.js中引入自定义插件
import InitEditor from 'custom-web-editor'
import '../node_modules/custom-web-editor/dist/custom-web-editor.css'
Vue.use(InitEditor)
<template>
    <InitEditor ref="editor"/>
</template>
<script>

export default {
  name: 'Test',
  mounted(){
    let ed = this.$refs.editor;
    // 导入html文本测试
    ed.importByHTMLText(`<body><div id="comp1">Page 2</div></body><style>* {box-sizing: border-box;}
    body {margin: 0;}#comp1{color:red;}</style>`);

    // 导入html远端路径测试
    // ed.importByHTMLPath('http://localhost:8081/html/switch.html');

    // 导出html内容测试
    const {html,css} = ed.getHTMLText();
    console.log('html:',html);
    console.log('css:',css);
    // 之后可以做其他处理

    // 缓存设置测试
    ed.setStore(true);//参数表示是否开启缓存
  }
};
</script>
// 若以下函数放到mounted里执行,可能会有问题,可以尝试用延时器,如
let that = this;
setTimeout(function (){
  that.ed.toPreview();
},100);

// 预览接口
this.ed.toPreview();

// 取消预览
this.ed.toStopPreview();

// 全屏不要放到mounted里执行
// 全屏接口
this.ed.toFullscreen();

// 取消全屏
this.ed.toStopFullscreen();

// 获取当前设备(画布)
this.ed.getDevice();

// 获取所有设备(画布)
this.ed.getAllDevices();

// 设置当前设备(画布)
this.ed.setDevice('tablet');

// 添加设备(画布)
this.ed.addDevice('手机', '375px');

// 设置图片/视频组件的文件上传路径和返回地址对象指定
// 这里测试用的axios,这个自己封装成类似下面的方法,作为参数传入
const uploadFile = (file) => {
const formData = new FormData();
formData.append('file', file);
return this.$axios.post("http://localhost:8085/upload/toUpload", formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  if (response) {
    return response.data.data;
  }else{
    throw new Error('上传失败');
  }
});
}
// 设置图片上传路径
this.ed.setUploadConfig(uploadFile);
// 设置视频上传路径
this.ed.setVideoUploadCommands(uploadFile);
0.1.13

9 months ago

0.1.14

9 months ago

0.1.12

12 months ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago