import './sass/editor.scss';
import Vditor from './lib/vditor/index.min';
import './lib/vditor/index.classic.css';
import emojiSet from './data/emoji.json';
let saveSvg = ``;
let saveUrl = "https://api.ourfor.top/blog/writes/content";
let emojis = {};
let emojiPath = `${pkg.cdn}/catalina@${pkg.version}/dist/emoji`;
_.each(emojiSet,(v,k) => {
emojis[k] = `${emojiPath}/${v}`;
})
const LazyLoadImage = () => {
const loadImg = (it) => {
const testImage = document.createElement('img')
testImage.src = it.getAttribute('data-src')
testImage.addEventListener('load', () => {
it.src = testImage.src
it.style.backgroundImage = 'none'
it.style.backgroundColor = 'transparent'
})
it.removeAttribute('data-src')
}
if (!('IntersectionObserver' in window)) {
document.querySelectorAll('img').forEach((data) => {
if (data.getAttribute('data-src')) {
loadImg(data)
}
})
return false
}
if (window.imageIntersectionObserver) {
window.imageIntersectionObserver.disconnect()
document.querySelectorAll('img').forEach(function (data) {
window.imageIntersectionObserver.observe(data)
})
} else {
window.imageIntersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entrie) => {
if ((typeof entrie.isIntersecting === 'undefined'
? entrie.intersectionRatio !== 0
: entrie.isIntersecting) && entrie.target.getAttribute('data-src')) {
loadImg(entrie.target)
}
})
})
document.querySelectorAll('img').forEach(function (data) {
window.imageIntersectionObserver.observe(data)
})
}
}
let handleSave = (vditor)=>{
let md = vditor.editor.element.innerText;
let preview = vditor.preview.element;
let html = preview.querySelector(".vditor-reset").innerHTML;
let counter = vditor.counter.element;
let count = counter.innerText.split("/")[0];
let dataId = document.querySelector("div.title>div[data-id]").getAttribute('data-id');
let articleId = new Number(dataId);
let data = {md,html,articleId,count};
$.ajax({
url: saveUrl,
method: 'put',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json',
success: data=>{
if(data.msg=='ok') vditor.tip.show("ไฟๅญๆๅ ๐๐๐๐๐๐
");
else vditor.tip.show("ไฟๅญๅคฑ่ดฅ ๐๐๐๐๐");
}
});
};
let config = {
counter: 100,
height: 700,
width: 1200,
editorName: 'vditor',
hint: {
emojiPath: 'https://cdn.jsdelivr.net/npm/vditor@1.8.3/dist/images/emoji',
emojiTail: '่ฎพ็ฝฎๅธธ็จ่กจๆ
',
emoji: {
'+1': '๐',
'-1': '๐',
'egg': '๐ฅ',
'eggplant': '๐',
'eight': '8โฃ',
'eight_pointed_black_star': 'โด',
'eight_spoked_asterisk': 'โณ',
'electric_plug': '๐',
'elephant': '๐',
'email': 'โ',
'end': '๐',
'envelope': 'โ',
'es': '๐ช๐ธ',
'euro': '๐ถ',
'european_castle': '๐ฐ',
'european_post_office': '๐ค',
'evergreen_tree': '๐ฒ',
'exclamation': 'โ',
'expressionless': '๐',
'eyeglasses': '๐',
'eyes': '๐',
'facepunch': '๐',
'factory': '๐ญ',
'fallen_leaf': '๐',
'family': '๐ช',
'fast_forward': 'โฉ',
'fax': '๐ ',
'fearful': '๐จ',
'feet': '๐พ',
'ferris_wheel': '๐ก',
'file_folder': '๐',
'fire': '๐ฅ',
'fire_engine': '๐',
'fireworks': '๐',
'first_quarter_moon': '๐',
'first_quarter_moon_with_face': '๐',
'fish': '๐',
'fish_cake': '๐ฅ',
'fishing_pole_and_fish': '๐ฃ',
'fist': 'โ',
'five': '5โฃ',
'flags': '๐',
'flashlight': '๐ฆ',
'floppy_disk': '๐พ',
'flower_playing_cards': '๐ด',
'flushed': '๐ณ',
'foggy': '๐',
'football': '๐',
'fork_and_knife': '๐ด',
'fountain': 'โฒ',
'four': '4โฃ',
'four_leaf_clover': '๐',
'fr': '๐ซ๐ท',
'free': '๐',
'fried_shrimp': '๐ค',
'fries': '๐',
'frog': '๐ธ',
'frowning': '๐ฆ',
'fuelpump': 'โฝ',
'full_moon': '๐',
'full_moon_with_face': '๐',
'trollface': 'https://unpkg.com/vditor@1.3.1/dist/images/emoji/trollface.png',
'huaji': 'https://unpkg.com/vditor@1.3.1/dist/images/emoji/huaji.gif',
...emojis,
},
},
tab: '\t',
preview: {
mode: 'both',
parse: () => {
LazyLoadImage()
},
},
toolbar: [{
hotkey: "โ-e",
name: "emoji",
tipPosition: "ne",
}, {
hotkey: "โ-h",
name: "headings",
tipPosition: "ne",
}, {
hotkey: "โ-b",
name: "bold",
prefix: "**",
suffix: "**",
tipPosition: "ne",
}, {
hotkey: "โ-i",
name: "italic",
prefix: "*",
suffix: "*",
tipPosition: "ne",
}, {
hotkey: "โ-s",
name: "strike",
prefix: "~~",
suffix: "~~",
tipPosition: "ne",
}, {
name: "|",
}, {
hotkey: "โ-โง-d",
name: "line",
prefix: "---",
tipPosition: "n",
}, {
hotkey: "โ-.",
name: "quote",
prefix: "> ",
tipPosition: "n",
}, {
name: "|",
}, {
hotkey: "โ-l",
name: "list",
prefix: "* ",
tipPosition: "n",
}, {
hotkey: "โ-o",
name: "ordered-list",
prefix: "1. ",
tipPosition: "n",
}, {
hotkey: "โ-j",
name: "check",
prefix: "* [ ] ",
tipPosition: "n",
}, {
name: "|",
}, {
hotkey: "โ-u",
name: "code",
prefix: "```\n",
suffix: "\n```",
tipPosition: "n",
}, {
hotkey: "โ-g",
name: "inline-code",
prefix: "`",
suffix: "`",
tipPosition: "n",
}, {
name: "|",
}, {
hotkey: "โ-z",
name: "undo",
tipPosition: "n",
}, {
hotkey: "โ-y",
name: "redo",
tipPosition: "n",
}, {
name: "|",
}, {
name: "upload",
tipPosition: "n",
}, {
hotkey: "โ-k",
name: "link",
prefix: "[",
suffix: "](https://)",
tipPosition: "n",
}, {
hotkey: "โ-m",
name: "table",
prefix: "| col1",
suffix: " | col2 | col3 |\n| --- | --- | --- |\n| | | |\n| | | |",
tipPosition: "n",
}, {
name: "record",
tipPosition: "n",
}, {
name: "|",
}, {
hotkey: "โ-p",
name: "both",
tipPosition: "nw",
}, {
hotkey: "โ-โง-p",
name: "preview",
tipPosition: "nw",
}, {
hotkey: "โ-'",
name: "fullscreen",
tipPosition: "nw",
}, {
name: 'format',
tipPosition: 'nw'
}, {
name: 'wysiwyg',
tipPosition: 'ne',
}, {
name: 'both',
tipPosition: 'ne',
},
'strike',
'devtools',
{
name: "save",
tipPosition: "nw",
class: "save",
icon: saveSvg,
tip: "ไฟๅญๆ็ซ ",
url: "hahah",
click: handleSave,
}, {
name: "title",
tipPosition: "nw",
class: "title",
icon: "",
id: "1",
tip: "ๆ็ซ ๆ ้ข",
}, {
name: "br",
}],
resize: {
enable: true,
position: 'top',
after: height => {
console.log(`after resize, height change: ${height}`)
},
},
upload: {
accept: 'image/*,.pdf,.war,.java,.kt,.js,.zip',
token: 'Have a good time',
url: "http://localhost:8080/upload",
linkToImgUrl: '/api/upload/fetch',
filename: name => {
// ? \ / : | < > * [ ] white to -
return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
},
// handler (file) {
// console.log(file)
// return 'handler'
// },
save(){
let title = document.querySelector('div.title>div')
return title.innerText;
}
},
};
let link = document.location.href;
link = "http://blog.ourfor.com/post/Spring+RESTful%E9%87%8D%E6%9E%84%E5%8D%9A%E5%AE%A2";
let index = config.toolbar.length
let uri = decodeURI(link)
// let content = "https://api.ourfor.top/blog/writes/content";
let content = `${$conf.api.base}/${$conf.api.path.write.editBuff}`;
// config.upload.url = "https://api.ourfor.top/blog/upload";
config.upload.url = `${$conf.api.base}/${$conf.api.path.upload}`;
config.cache = false;
class Editor extends Component {
constructor(props){
super(props);
this.state = {
title: 0,
artilceId: '',
};
}
componentWillMount(){
$.get(content,data=>{
config.toolbar[index-2].icon = data.title;
config.toolbar[index-2].id = data.articleId;
this.setState({
title: data.title,
artilceId: data.artilceId,
data
});
let vditor = new Vditor('vditor', config);
setTimeout(()=>{
$('.vditor-textarea').text(data.md)
$('.vditor-textarea + .vditor-preview>div').html(data.html)
},1000);
},'json');
}
componentDidMount(){
}
componentDidUpdate(){
}
render(){
return
}
}
export default Editor;