|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<title>yuque编辑器</title>
|
|
|
<link rel="stylesheet" type="text/css" href="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/yuqueEditor/umd_doc.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/yuqueEditor/yuQueAntd.css" />
|
|
|
<link rel="stylesheet" href="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/yuqueEditor/lake-content-v1.css" />
|
|
|
<script src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/yuqueEditor/react.production.min.js"></script>
|
|
|
<script src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/yuqueEditor/react-dom.production.min.js"></script>
|
|
|
<script src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/yuqueEditor/umd_doc.umd.js"></script>
|
|
|
<script src="http://matripe.oss-cn-beijing.aliyuncs.com/js/jquery.min.js"></script>
|
|
|
<style>
|
|
|
.placeholder::before {
|
|
|
content: attr(data-placeholder);
|
|
|
display: block;
|
|
|
color: rgba(0, 0, 0, 0.2);
|
|
|
position: absolute;
|
|
|
left: 12px;
|
|
|
top: 72px;
|
|
|
z-index: 999;
|
|
|
font-size: 14px;
|
|
|
-webkit-text-stroke-width: 0.1px;
|
|
|
font-weight: 400;
|
|
|
line-height: 1.5714285714285714;
|
|
|
list-style: none;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
}
|
|
|
|
|
|
.ne-layout-mode-fixed .ne-engine,
|
|
|
.ne-layout-mode-adapt .ne-engine {
|
|
|
min-height: auto;
|
|
|
}
|
|
|
|
|
|
.ne-doc-major-editor .ne-layout-mode-adapt .ne-ui {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.ne-layout-mode-fixed .ne-engine,
|
|
|
.ne-layout-mode-adapt .ne-engine {
|
|
|
min-height: 440px;
|
|
|
}
|
|
|
.ne-ui.lakex-default-theme {
|
|
|
background-color: #fff;
|
|
|
position: sticky;
|
|
|
}
|
|
|
.ne-td {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.ne-layout-mode-fixed .ne-engine,
|
|
|
.ne-layout-mode-adapt .ne-engine {
|
|
|
padding: 20px 12px 90px 12px;
|
|
|
}
|
|
|
|
|
|
.ne-doc-major-editor .ne-layout-mode-adapt .ne-ui {
|
|
|
border-top-left-radius: 6px;
|
|
|
border-top-right-radius: 6px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="root" class="ne-doc-major-editor placeholder" data-placeholder=""></div>
|
|
|
<script>
|
|
|
let wStr = window.location.href.indexOf("?");
|
|
|
$("#root").on("click", function () {
|
|
|
$("#root").removeAttr("data-placeholder");
|
|
|
});
|
|
|
$("#root").on("mouseleave", function () {
|
|
|
setTimeout(() => {
|
|
|
if ($("ne-p ne-text").html()) {
|
|
|
$("#root").attr("data-placeholder", " ");
|
|
|
} else {
|
|
|
if (wStr > -1) {
|
|
|
$("#root").attr("data-placeholder", " ");
|
|
|
} else {
|
|
|
$("#root").attr("data-placeholder", "请输入内容");
|
|
|
}
|
|
|
}
|
|
|
}, 100);
|
|
|
});
|
|
|
|
|
|
function uuid() {
|
|
|
var s = [];
|
|
|
var hexDigits = "0123456789abcdef";
|
|
|
for (var i = 0; i < 36; i++) {
|
|
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
|
|
}
|
|
|
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
|
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
|
|
s[8] = s[13] = s[18] = s[23] = "-";
|
|
|
|
|
|
var uuid = s.join("");
|
|
|
return uuid;
|
|
|
}
|
|
|
|
|
|
var img = "";
|
|
|
|
|
|
window.onload = function () {
|
|
|
const { createOpenEditor, toolbarItems } = window.Doc;
|
|
|
let configJS = {
|
|
|
upload: [toolbarItems.cardSelect, "|"],
|
|
|
default: [toolbarItems.undo, toolbarItems.redo, toolbarItems.formatPainter, toolbarItems.clearFormat, "|", toolbarItems.style, toolbarItems.fontsize, toolbarItems.bold, toolbarItems.italic, toolbarItems.strikethrough, toolbarItems.underline, toolbarItems.mixedTextStyle, "|", toolbarItems.color, toolbarItems.bgColor, "|", toolbarItems.alignment, toolbarItems.unorderedList, toolbarItems.orderedList, toolbarItems.indent, toolbarItems.lineHeight, "|", toolbarItems.taskList, toolbarItems.link, toolbarItems.quote, toolbarItems.hr],
|
|
|
},
|
|
|
itemsArray = [];
|
|
|
if (wStr > -1) {
|
|
|
// 新增职位
|
|
|
itemsArray = configJS.default;
|
|
|
$("root").attr("data-");
|
|
|
} else {
|
|
|
// 内容管理
|
|
|
itemsArray = configJS.upload.concat(configJS.default);
|
|
|
}
|
|
|
|
|
|
// 创建编辑器
|
|
|
const editor = createOpenEditor(document.getElementById("root"), {
|
|
|
input: {},
|
|
|
image: {
|
|
|
isCaptureImageURL() {
|
|
|
return false;
|
|
|
},
|
|
|
createUploadPromise: (request) => {
|
|
|
const { type, data } = request;
|
|
|
if (type === "url") {
|
|
|
// data 是一个url，表示需要转存
|
|
|
} else if (type === "file") {
|
|
|
// data是一个File
|
|
|
var dataObj = {};
|
|
|
$.ajax({
|
|
|
method: "get", // 请求使用的 http 方法，包含 get/post，如果省略默认是 get
|
|
|
url: "http://a.matripe.com.cn/oss/policy", // 请求使用的 url 地址
|
|
|
headers: {
|
|
|
Authorization: "Bearer " + "eyJUeXBlIjoiSnd0IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJ0b2tlbiI6IntcImNyZWF0ZWRcIjoxNzAwMTA0Nzg2NzAzLFwidGVsXCI6XCIxMzI1MzMzOTM5NFwiLFwidXNlcklkXCI6MTAwNzMxLFwidXNlck5hbWVcIjpcIuWImOiBqlwifSJ9.5s0pWGnyg0d2TH03SSWzsYpOEafP5Pjogt1ml5q7C6s",
|
|
|
},
|
|
|
})
|
|
|
.done(function (response) {
|
|
|
let str = data.name.replace(/\s/g, "");
|
|
|
dataObj.policy = response.data.data.policy;
|
|
|
dataObj.signature = response.data.data.signature;
|
|
|
dataObj.ossaccessKeyId = response.data.data.accessid;
|
|
|
dataObj.key = response.data.data.dir + uuid() + str;
|
|
|
dataObj.dir = response.data.data.dir;
|
|
|
dataObj.host = response.data.data.host;
|
|
|
var formData = new FormData();
|
|
|
//注意formData里append添加的键的大小写
|
|
|
formData.append("key", dataObj.key); //存储在oss的文件路径
|
|
|
formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId); //accessKeyId
|
|
|
formData.append("policy", dataObj.policy); //policy
|
|
|
formData.append("Signature", dataObj.signature); //签名
|
|
|
formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
|
|
|
formData.append("file", data); // 一定在最后
|
|
|
$.ajax({
|
|
|
type: "post",
|
|
|
url: "http://matripe-cms.oss-cn-beijing.aliyuncs.com",
|
|
|
data: formData,
|
|
|
contentType: false, // 不设置Content-Type请求头
|
|
|
processData: false,
|
|
|
success: function (data1) {
|
|
|
img = dataObj.host + "/" + dataObj.key;
|
|
|
},
|
|
|
});
|
|
|
})
|
|
|
.fail(function (err) {})
|
|
|
.always(function () {});
|
|
|
}
|
|
|
|
|
|
return Promise.resolve({
|
|
|
url: img,
|
|
|
size: 10000, // 文件大小
|
|
|
filename: "",
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
toolbar: {
|
|
|
agentConfig: {
|
|
|
default: {
|
|
|
items: itemsArray,
|
|
|
},
|
|
|
// table选区工具栏
|
|
|
table: {
|
|
|
items: [toolbarItems.cardSelect, "|", toolbarItems.undo, toolbarItems.redo, toolbarItems.formatPainter, toolbarItems.clearFormat, "|", toolbarItems.style, toolbarItems.fontsize, toolbarItems.bold, toolbarItems.italic, toolbarItems.strikethrough, toolbarItems.underline, toolbarItems.mixedTextStyle, "|", toolbarItems.color, toolbarItems.bgColor, toolbarItems.tableCellBgColor, toolbarItems.tableBorderVisible, "|", toolbarItems.alignment, toolbarItems.tableVerticalAlign, toolbarItems.tableMergeCell, "|", toolbarItems.unorderedList, toolbarItems.orderedList, toolbarItems.indent, toolbarItems.lineHeight, "|", toolbarItems.taskList, toolbarItems.link, toolbarItems.quote, toolbarItems.hr],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
|
|
|
var desp = "";
|
|
|
|
|
|
console.log();
|
|
|
// editor.setDocument("text/lake", "");
|
|
|
|
|
|
window.addEventListener(
|
|
|
"message",
|
|
|
function (event) {
|
|
|
// debugger
|
|
|
// editor.setDocument("text/lake", ' ');
|
|
|
console.log("event", event);
|
|
|
var data = event.data;
|
|
|
// 然后就可以获得vue传过来的数据
|
|
|
console.log("从vue中获得的数据", data);
|
|
|
editor.setDocument("text/lake", data);
|
|
|
// var data = event.data.replace(/\n/g, "<br />");
|
|
|
// desp = data.replace(/[*]+/g, '');
|
|
|
},
|
|
|
"*"
|
|
|
);
|
|
|
editor.setDocument("text/lake", desp || "");
|
|
|
// 监听内容变动
|
|
|
let timer = null;
|
|
|
editor.on("contentchange", (e) => {
|
|
|
var editorObj = { lake: editor.getDocument("text/lake"), html: editor.getDocument("text/html"),remake: editor.getDocument("text/plain") };
|
|
|
|
|
|
// if (!timer) {
|
|
|
// clearTimeout(colorMark.value);
|
|
|
// timer = null;
|
|
|
clearTimeout(timer)
|
|
|
timer = setTimeout(() => {
|
|
|
// console.log(e);
|
|
|
window.parent.postMessage(editorObj, "*");
|
|
|
}, 500);
|
|
|
// }
|
|
|
|
|
|
// window.parent.postMessage(editorObj, "*");
|
|
|
// console.log(editor.getDocument("text/lake"));
|
|
|
// window.parent.postMessage(editor.getDocument("text/lake"), "*");
|
|
|
});
|
|
|
editor.on("focusstatuschange", ({ focused }) => {
|
|
|
console.info("文档焦点状态", focused);
|
|
|
});
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|