migrate to new git
This commit is contained in:
292
web/App_Script/ContentBuilder/ContentBuilder.aspx
Normal file
292
web/App_Script/ContentBuilder/ContentBuilder.aspx
Normal file
@@ -0,0 +1,292 @@
|
||||
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentBuilder.aspx.cs" Inherits="App_Script_ContentBuilder_ContentBuilder" %>
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head runat="server">
|
||||
<meta charset="utf-8">
|
||||
<title>閃電編輯器 - Bootstrap ContentBuilder</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<link rel="shortcut icon" href="../ckeditor/plugins/ContentBuilder/icons/ContentBuilder.png" type="image/png"/>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<script src="../jquery-1.12.4.min.js"></script>
|
||||
<link href="assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
|
||||
<link href="contentbuilder/contentbuilder.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style>
|
||||
.container {margin: 140px auto; /*max-width: 800px;*/ width:100%; /*padding:0 35px;*/ box-sizing: border-box;}
|
||||
#button button{
|
||||
min-width: 135px;
|
||||
height: 50px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
color: #4a4a4a;
|
||||
border: 1px solid transparent;
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
transition: all ease 0.3s;
|
||||
user-select: none;
|
||||
white-space: normal;
|
||||
vertical-align: middle;
|
||||
line-height: 50px;
|
||||
}
|
||||
#button button:hover {
|
||||
background: #EEE;
|
||||
}
|
||||
#button button>img{
|
||||
height:20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let web_root ='<%=web_root%>';
|
||||
</script>
|
||||
|
||||
<link href="<%=ResolveUrl("~/App_Script/fontawesome/css/all.min.css") %>" rel="stylesheet" />
|
||||
<script src="<%=ResolveUrl("~/App_Script/sweetalert2-9.10.9/dist/sweetalert2.min.js") %>"></script>
|
||||
<link href="<%=ResolveUrl("~/App_Script/sweetalert2-9.10.9/dist/sweetalert2.min.css") %>" rel="stylesheet" />
|
||||
<script>
|
||||
function msgbox(html, icon = '', url = '') {
|
||||
Swal.fire({
|
||||
icon: icon,
|
||||
html: html,
|
||||
confirmButtonText: '關閉',
|
||||
onClose: () => {
|
||||
if (url != '') {
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function msgtop(html, icon = 'success') {
|
||||
const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
heightAuto: false,
|
||||
timerProgressBar: true,
|
||||
onOpen: (toast) => {
|
||||
toast.addEventListener('mouseenter', Swal.stopTimer)
|
||||
toast.addEventListener('mouseleave', Swal.resumeTimer)
|
||||
}
|
||||
})
|
||||
|
||||
Toast.fire({
|
||||
icon: icon,
|
||||
html: '<div class="swal2-toast-cus">' + html + '</div>'
|
||||
})
|
||||
}
|
||||
|
||||
var mctmp = '0';
|
||||
function msgconfirm(html, btn, icon = 'question') {
|
||||
if (mctmp == '0') {
|
||||
Swal.fire({
|
||||
html: html,
|
||||
icon: icon,
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '<i class="mdi mdi-check"></i> 確定',
|
||||
cancelButtonText: '<i class="mdi mdi-close"></i> 取消'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
mctmp = '1';
|
||||
if ($(btn)[0].hasAttribute('href')) {
|
||||
var href = $(btn).attr('href');
|
||||
window.location.href = href;
|
||||
} else {
|
||||
$(btn).click();
|
||||
}
|
||||
}
|
||||
})
|
||||
mctmp = '0';
|
||||
return false;
|
||||
} else {
|
||||
mctmp = '0';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.swal2-container > div {
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.swal2-actions > button {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.swal2-toast-cus {
|
||||
font-size: 20px;
|
||||
margin: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p.form-control-static label{
|
||||
margin-left:3px;
|
||||
margin-right:10px;
|
||||
}
|
||||
.table-hover td select.form-control{
|
||||
width:auto;
|
||||
margin:auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form id="form1" runat="server">
|
||||
<div>
|
||||
</div>
|
||||
</form>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
$('.container')[0].insertAdjacentHTML('beforeend', window.opener.CKEDITOR.instances[new URL(location.href).searchParams.get('editor')].getData());
|
||||
|
||||
builder.applyBehavior();
|
||||
builder.opts.onChange();
|
||||
builder.opts.onRender();
|
||||
}
|
||||
|
||||
function closeWindow(b) {
|
||||
if (b) {
|
||||
if ($('[data-filename]').length > 0) {
|
||||
|
||||
var formData = new FormData();
|
||||
[].slice.call($('[data-filename]')).forEach(function (item, index, array) {
|
||||
if (item.getAttribute("data-filename") != null) {
|
||||
let dataUrl = item.src.split(',')
|
||||
let base64 = dataUrl[1];
|
||||
var fileName = item.getAttribute("data-filename");
|
||||
var imgfile = convertBase64UrlToImgFile(base64, fileName, 'image/*');
|
||||
formData.append('file', imgfile, fileName);
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
asynce: false,
|
||||
url: "upload.aspx",
|
||||
type: "POST",
|
||||
cache: false,
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function (data) {
|
||||
[].slice.call($('[data-filename]')).forEach(function (item, index, array) {
|
||||
item.src = web_root + "upload/edit/" + item.getAttribute("data-filename");//.split('.')[0] + ".jpg";
|
||||
item.removeAttribute("data-filename")
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
window.opener.CKEDITOR.instances[new URL(location.href).searchParams.get('editor')].setData(builder.html());
|
||||
window.close();
|
||||
window.opener.focus();
|
||||
}, 100);
|
||||
},
|
||||
error: function (data) {
|
||||
msgtop('上傳圖片失敗', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
window.opener.CKEDITOR.instances[new URL(location.href).searchParams.get('editor')].setData(builder.html());
|
||||
window.close();
|
||||
window.opener.focus();
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
window.close();
|
||||
window.opener.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function convertBase64UrlToImgFile(urlData,fileName,fileType) {
|
||||
var bytes = window.atob(urlData); //转换为byte
|
||||
//处理异常,将ascii码小于0的转换为大于0
|
||||
var ab = new ArrayBuffer(bytes.length);
|
||||
var ia = new Int8Array(ab);
|
||||
var i;
|
||||
for (i = 0; i < bytes.length; i++) {
|
||||
ia[i] = bytes.charCodeAt(i);
|
||||
}
|
||||
//转换成文件，添加文件的type，name，lastModifiedDate属性
|
||||
var blob=new Blob([ab], {type:fileType});
|
||||
blob.lastModifiedDate = new Date();
|
||||
blob.name = fileName;
|
||||
return blob;
|
||||
}
|
||||
/**/</script>
|
||||
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
<div id="button" style="position: fixed; top: 0; left: 0;">
|
||||
<button type="button" id="btn_ok" onclick="closeWindow(true)" title="確定"><img src="check2.svg" />確定</button>
|
||||
<button type="button" id="btn_cancel" onclick="closeWindow(false)" title="取消"><img src="cross2.svg" />取消</button>
|
||||
</div>
|
||||
<script src="contentbuilder/contentbuilder.js" type="text/javascript"></script>
|
||||
<script src="assets/minimalist-blocks/content.js" type="text/javascript"></script>
|
||||
<script src="contentbuilder/lang/zh-tw.js" type="text/javascript"></script>
|
||||
<script>
|
||||
var snippetCategories = [
|
||||
[120, "基本"],
|
||||
[118, "文章"],
|
||||
[101, "標題"],
|
||||
[119, "按鈕"],
|
||||
[102, "相片"],
|
||||
[103, "圖文區塊"],
|
||||
[116, "聯絡資訊"],
|
||||
[104, "商品"],
|
||||
[105, "特色"],
|
||||
[106, "流程"],
|
||||
[107, "價格"],
|
||||
[108, "技能"],
|
||||
[109, "成就"],
|
||||
[110, "引言"],
|
||||
[111, "合作伙伴"],
|
||||
[112, "相關資訊"],
|
||||
[113, "錯誤畫面"],
|
||||
[114, "建置中"],
|
||||
[115, "說明"],
|
||||
//[999, "送出 Send"]
|
||||
];
|
||||
var builder = new ContentBuilder({
|
||||
container: '.container',
|
||||
snippetOpen: true,
|
||||
row: 'row',
|
||||
cols: ['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'],
|
||||
clearPreferences: true,
|
||||
snippetCategories: snippetCategories
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<%--
|
||||
應修正項目:
|
||||
|
||||
----
|
||||
e.opts.emailSnippetCategories
|
||||
e.opts.snippetCategories
|
||||
To get HTML:
|
||||
|
||||
var html = builder.html();
|
||||
--%>
|
||||
Reference in New Issue
Block a user