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