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