119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="w-100">
|
||
|
|
<!-- tinymceScriptSrc="/tinymce/tinymce.min.js" -->
|
||
|
|
<editor
|
||
|
|
api-key="pnxkbox1zj5zaghgi1dolyi9ch28kr9ohnvc1qz3beeqdfwg"
|
||
|
|
ref="global-tiny-editor"
|
||
|
|
output-format="html"
|
||
|
|
v-model="editorData"
|
||
|
|
:init="tinyMceConfiguration"
|
||
|
|
>
|
||
|
|
</editor>
|
||
|
|
|
||
|
|
<div class="my-3" v-if="showSaveButton">
|
||
|
|
<button-component
|
||
|
|
@click="save"
|
||
|
|
type="button"
|
||
|
|
classes="btn-primary"
|
||
|
|
buttonText="ذخیره"
|
||
|
|
title="ذخیره"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
></button-component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import Editor from "@tinymce/tinymce-vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
showSaveButton: {
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
tinyText: {
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
parentButtonLoading: {
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showTiny: false,
|
||
|
|
|
||
|
|
buttonLoading: this.parentButtonLoading,
|
||
|
|
editorData: "",
|
||
|
|
api_key: "pnxkbox1zj5zaghgi1dolyi9ch28kr9ohnvc1qz3beeqdfwg",
|
||
|
|
tinyMceConfiguration: {
|
||
|
|
content_langs: [
|
||
|
|
{ title: "English", code: "en" },
|
||
|
|
{ title: "Persian", code: "fa" },
|
||
|
|
],
|
||
|
|
|
||
|
|
// selector: "#ttextarea",
|
||
|
|
language: "fa_IR",
|
||
|
|
language_url: "/tinymce/langs/fa_IR.js",
|
||
|
|
directionality: "rtl",
|
||
|
|
// baseUrl: '/',
|
||
|
|
toolbar_sticky: true,
|
||
|
|
force_br_newlines: false,
|
||
|
|
force_p_newlines: false,
|
||
|
|
height: "25em",
|
||
|
|
width: "100%",
|
||
|
|
|
||
|
|
plugins: "link",
|
||
|
|
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",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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);
|
||
|
|
return this.editorData;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
tinyText(newVal) {
|
||
|
|
this.editorData = newVal;
|
||
|
|
},
|
||
|
|
parentButtonLoading(newVal) {
|
||
|
|
this.buttonLoading = newVal;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|