<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>