352 lines
12 KiB
Vue
352 lines
12 KiB
Vue
<template>
|
||
<div class="w-100">
|
||
<editor
|
||
tinymceScriptSrc="/tinymce/tinymce.min.js"
|
||
ref="global-tiny-editor"
|
||
output-format="html"
|
||
v-model="editorData"
|
||
:init="tinyMceConfiguration"
|
||
>
|
||
</editor>
|
||
|
||
<div class="my-3" v-if="hideButton">
|
||
<button-component
|
||
:class="$attrs.hideButton"
|
||
@click="save"
|
||
type="button"
|
||
classes="btn-primary"
|
||
buttonText="ذخیره"
|
||
title="ذخیره"
|
||
:buttonLoading="buttonLoading"
|
||
></button-component>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
mounted() {
|
||
// this.showTiny = true
|
||
|
||
// this.$nextTick(() => {
|
||
this.editorData = this.tinyText;
|
||
var n = Math.floor(Math.random() * 11);
|
||
var k = Math.floor(Math.random() * 1000000);
|
||
var m = String.fromCharCode(n) + k;
|
||
this.api_key = m;
|
||
|
||
// })
|
||
},
|
||
|
||
props: {
|
||
hideButton:{
|
||
default:true
|
||
},
|
||
tinyText: {
|
||
default: "",
|
||
},
|
||
parentButtonLoading: {
|
||
default: false,
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
buttonLoading: this.parentButtonLoading,
|
||
editorData: "",
|
||
api_key: "",
|
||
|
||
tinyMceConfiguration: {
|
||
selector: "#textarea",
|
||
apiKey: "pnxkbox1zj5zaghgi1dolyi9ch28kr9ohnvc1qz3beeqdfwg",
|
||
menubar: false,
|
||
statusbar: false,
|
||
language: "fa_IR",
|
||
language_url: "/tinymce/langs/fa_IR.js",
|
||
directionality: "rtl",
|
||
baseUel: "/",
|
||
theme_url: "/tinymce/themes/silver/theme.min.js",
|
||
toolbar_sticky: true,
|
||
force_br_newlines: false,
|
||
force_p_newlines: false,
|
||
//forced_root_block : 'p',
|
||
setup: function(editor) {
|
||
if (editor) {
|
||
editor.on("init", function(e) {});
|
||
editor.on("ScrollWindow", function(e) {
|
||
//var y1 = editor.getWin().pageYOffset;
|
||
//var sctop = $(editor.getContainer()).scrollTop();
|
||
if ("js_ScrollChanged" in window.external) {
|
||
window.external.js_ScrollChanged(0);
|
||
}
|
||
});
|
||
editor.on("Paste", function(e) {
|
||
if ("js_ScrollHeightChanged" in window.external) {
|
||
window.external.js_ScrollHeightChanged();
|
||
}
|
||
});
|
||
editor.on("DblClick", function(e) {
|
||
if (e.ctrlKey) selectParag(editor);
|
||
else selectWord(editor);
|
||
});
|
||
editor.on("SelectionChange", function(e) {
|
||
//if ('js_SelectionChange' in window.external){
|
||
// window.external.js_SelectionChange();
|
||
//}
|
||
});
|
||
editor.on("NodeChange", function(e) {
|
||
if ("js_NodeChange" in window.external) {
|
||
wlast = "";
|
||
window.external.js_NodeChange(e.element.innerText);
|
||
}
|
||
});
|
||
editor.on("mousedown", function(e) {
|
||
if ("js_mousedown" in window.external) {
|
||
window.external.js_mousedown();
|
||
}
|
||
});
|
||
editor.on("keydown", function(e) {
|
||
if ("js_keydown" in window.external) {
|
||
var handeled = window.external.js_keydown(e.ctrlKey, e.keyCode);
|
||
if (handeled) {
|
||
e.preventDefault();
|
||
return false;
|
||
}
|
||
}
|
||
|
||
if (checkPairedChar(editor, e)) {
|
||
//tinymce.execCommand('ayahautocomplate',false,'وتد');
|
||
return false;
|
||
}
|
||
|
||
endingMarkDowns(editor, e);
|
||
});
|
||
editor.on("keyup", function(e) {
|
||
if (editor.selection) checkMarkDown(editor, e);
|
||
|
||
//setingTag2(editor, e);
|
||
});
|
||
editor.on("keypress", function(e) {
|
||
if (checkHalfSpace(editor, e)) {
|
||
return false;
|
||
} else if (checkNemayah(editor, e)) {
|
||
} else if (wlast != "") {
|
||
if ("js_AutoComplete" in window.external) {
|
||
window.external.js_AutoComplete(wlast, indexlast);
|
||
}
|
||
}
|
||
});
|
||
editor.on("change", function(e) {
|
||
//console.log('Editor contents was changed.');
|
||
if ("js_Changed" in window.external) {
|
||
window.external.js_Changed("change");
|
||
}
|
||
});
|
||
editor.on("redo", function(e) {
|
||
//console.log('Editor contents was changed.');
|
||
if ("js_Changed" in window.external) {
|
||
window.external.js_Changed("redo");
|
||
}
|
||
});
|
||
editor.on("undo", function(e) {
|
||
//console.log('Editor contents was changed.');
|
||
if ("js_Changed" in window.external) {
|
||
window.external.js_Changed("undo");
|
||
}
|
||
});
|
||
editor.ui.registry.addMenuItem("DeleteErab", {
|
||
text: "Delete erab paragraph",
|
||
context: "tools",
|
||
shortcut: "Alt+5",
|
||
onAction: function() {
|
||
removeContentErab(editor);
|
||
},
|
||
});
|
||
editor.ui.registry.addMenuItem("ParseHadith", {
|
||
text: "Parse hadith format",
|
||
context: "tools",
|
||
shortcut: "Alt+6",
|
||
onAction: function() {
|
||
parseHadith(editor);
|
||
},
|
||
});
|
||
|
||
// editor.ui.registry.addMenuItem('MenuTextOption', {
|
||
// text: 'Text option',
|
||
// context: 'tools',
|
||
// getSubmenuItems: function () {
|
||
// return [ {
|
||
// text: "Delete erab",
|
||
// onclick: function () {
|
||
// removeContentErab(editor);
|
||
// }
|
||
// }, {
|
||
// text: "Parse hadith format",
|
||
// onclick: function () {
|
||
// parseHadith(editor);
|
||
// }
|
||
// }]
|
||
// }
|
||
// });
|
||
}
|
||
},
|
||
|
||
block_formats:
|
||
"متن عادی=p; عنوان1=h1; عنوان 2=h2; عنوان 3=h3; عنوان 4=h4; عنوان 5=h5; عنوان 6=h6",
|
||
plugins: [
|
||
"advlist autolink lists link image imagetools charmap print preview anchor",
|
||
"searchreplace visualblocks code fullscreen",
|
||
"insertdatetime media table contextmenu paste imagetools wordcount autoresize searchreplace help quickbars",
|
||
],
|
||
external_plugins: {
|
||
hadithyab: "/tinymce/pluginsEx/hadithyab/plugin.min.js",
|
||
tchecklist: "/tinymce/pluginsEx/tchecklist/plugin.min.js",
|
||
comment: "/tinymce/pluginsEx/comment/plugin.min.js",
|
||
footnotes: "/tinymce/pluginsEx/footnotes/plugin.min.js",
|
||
ayahautocomplate: "/tinymce/pluginsEx/ayahautocomplate/plugin.min.js",
|
||
},
|
||
toolbar:
|
||
"searchreplace undo redo copy paste | formatselect styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image table | footnotes code hadithyab help",
|
||
contextmenu:
|
||
"copy paste pastetext removeformat | DeleteErab ParseHadith | footnotes link image",
|
||
contextmenu_never_use_native: true,
|
||
quickbars_insert_toolbar: false,
|
||
//quickbars_insert_toolbar: 'quicktable image media codesample',
|
||
quickbars_selection_toolbar:
|
||
"bold underline | forecolor backcolor | bullist numlist | quicklink comment",
|
||
style_formats: [
|
||
{ title: "آیه", inline: "span", classes: "tayah" },
|
||
{ title: "حدیث", inline: "span", classes: "thadith" },
|
||
{ title: "سند", inline: "span", classes: "tsanad" },
|
||
{ title: "اصطلاح", inline: "span", classes: "tterm" },
|
||
{ title: "برچسب", inline: "span", classes: "ttag" },
|
||
],
|
||
paste_preprocess: function(plugin, args) {
|
||
args.content = safePaste(args.content);
|
||
},
|
||
paste_postprocess: function(plugin, args) {
|
||
//console.log(args.node);
|
||
//args.node.setAttribute('id', '42');
|
||
},
|
||
paste_tab_spaces: 2,
|
||
init_instance_callback: function(editor) {
|
||
editor.shortcuts.add("alt+1", "درج علامت آیه", function() {
|
||
tinymce.activeEditor.formatter.apply("ayah");
|
||
unSelect(editor);
|
||
}),
|
||
editor.shortcuts.add("alt+2", "درج علامت حدیث", function() {
|
||
tinymce.activeEditor.formatter.apply("hadith");
|
||
unSelect(editor);
|
||
}),
|
||
editor.shortcuts.add("alt+3", "درج علامت سند", function() {
|
||
tinymce.activeEditor.formatter.apply("sanad");
|
||
unSelect(editor);
|
||
}),
|
||
editor.shortcuts.add("alt+4", "درج علامت اصطلاح", function() {
|
||
tinymce.activeEditor.formatter.apply("term");
|
||
unSelect(editor);
|
||
}),
|
||
editor.shortcuts.add("alt+5", "حذف اعراب متن جاری", function() {
|
||
removeContentErab(editor);
|
||
}),
|
||
editor.shortcuts.add(
|
||
"alt+6",
|
||
"تحلیل خودکار سند و حدیث",
|
||
function() {
|
||
parseHadith(editor);
|
||
}
|
||
),
|
||
editor.shortcuts.add("f3", "درج علامت برچسب", function() {
|
||
tinymce.activeEditor.formatter.apply("tag");
|
||
}),
|
||
editor.shortcuts.add("ctrl+alt+f", "درج پاورقی جدید", function() {
|
||
tinymce.execCommand("footnotes", false, "");
|
||
}),
|
||
editor.shortcuts.add("ctrl+alt+c", "درج حاشیه جدید", function() {
|
||
tinymce.execCommand("comment", false, "");
|
||
});
|
||
},
|
||
|
||
formats: {
|
||
alignleft: {
|
||
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
|
||
classes: "left",
|
||
},
|
||
aligncenter: {
|
||
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
|
||
classes: "center",
|
||
},
|
||
alignright: {
|
||
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
|
||
classes: "right",
|
||
},
|
||
alignfull: {
|
||
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
|
||
classes: "full",
|
||
},
|
||
bold: { inline: "span", classes: "tbold" },
|
||
italic: { inline: "span", classes: "titalic" },
|
||
underline: { inline: "span", classes: "tunderline", exact: true },
|
||
strikethrough: { inline: "span", classes: "tstrikethrough" },
|
||
ayah: { title: "آیه", inline: "span", classes: "tayah" },
|
||
hadith: { title: "حدیث", inline: "span", classes: "thadith" },
|
||
sanad: { title: "سند", inline: "span", classes: "tsanad" },
|
||
term: { title: "اصطلاح", inline: "span", classes: "tterm" },
|
||
tag: { title: "برچسب", inline: "span", classes: "ttag" },
|
||
},
|
||
content_css: "tinystyle.css",
|
||
imagetools_toolbar:
|
||
"rotateleft rotateright | flipv fliph | editimage imageoptions",
|
||
|
||
//برای افزودن امکان درج تصویر از شخصی
|
||
image_title: true,
|
||
automatic_uploads: true,
|
||
file_picker_types: "image",
|
||
file_picker_callback: function(cb) {
|
||
var input = document.createElement("input");
|
||
input.setAttribute("type", "file");
|
||
input.setAttribute("accept", "image/*");
|
||
input.onchange = function() {
|
||
var file = this.files[0];
|
||
var reader = new FileReader();
|
||
reader.onload = function() {
|
||
var id = "blobid" + new Date().getTime();
|
||
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
|
||
var base64 = reader.result.split(",")[1];
|
||
var blobInfo = blobCache.create(id, file, base64);
|
||
blobCache.add(blobInfo);
|
||
cb(blobInfo.blobUri(), { title: file.name });
|
||
};
|
||
reader.readAsDataURL(file);
|
||
};
|
||
input.click();
|
||
},
|
||
|
||
content_style:
|
||
"body { font-family:Sahel,Tahoma,Arial,sans-serif; font-size:16px }",
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
editorModel: {
|
||
get() {
|
||
return this.editorData;
|
||
},
|
||
set(value) {
|
||
this.editorData = value;
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
save() {
|
||
if (this.buttonLoading) return;
|
||
this.buttonLoading = true;
|
||
|
||
this.$emit("on-save", this.editorData);
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style></style>
|