custom-web-editor
v0.1.14
Published
基于grapesjs自定义编辑器
Downloads
151
Readme
custom-web-editor
Install
npm i custom-web-editorUsage
// 在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);