Skip to content

Commit

Permalink
update tinymce, improve snippet layout, add vuejs method for integrat…
Browse files Browse the repository at this point in the history 
…ing to templates, sorting by namespace
  • Loading branch information
FabianHippmann committed Jul 19, 2018
1 parent eac107d commit 8c05a13
Show file tree
Hide file tree
Showing 9 changed files with 404 additions and 197 deletions.
151 changes: 81 additions & 70 deletions resources/assets/js/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,81 +3,92 @@
</template>

<script>
import tinymce from 'tinymce';
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/paste/plugin";
import "tinymce/plugins/link/plugin";
import "tinymce/plugins/autolink/plugin";
import "tinymce/plugins/autoresize/plugin";
import "tinymce/plugins/image/plugin";
import "tinymce/plugins/anchor/plugin";
import "tinymce/plugins/visualblocks/plugin";
import "tinymce/plugins/media/plugin";
import "tinymce/plugins/searchreplace/plugin";
import "tinymce/plugins/contextmenu/plugin";
export default {
props : {
id: {
type: String,
default: 'editor'
props: {
id: {
type: String,
default: "editor"
},
value: {
type: String,
default: ""
}
},
value: {
type: String,
default : ''
}
},
data: function() {
return {
myeditor: undefined
}
},
watch: {
"value": function(newVal, oldVal){
if(tinymce) {
if(newVal != null && oldVal == '' && this.myeditor != null) {
this.myeditor.setContent(newVal)
data: function() {
return {
myeditor: undefined
};
},
watch: {
value: function(newVal, oldVal) {
if (tinymce) {
if (newVal != null && oldVal == "" && this.myeditor != null) {
this.myeditor.setContent(newVal);
}
}
}
}
}
},
mounted() {
if(tinymce) {
tinymce.init({
selector: `#${this.id}`,
theme: 'modern',
setup: (editor) => {
editor.on('init', (e) => {
if(this.value != undefined) editor.setContent(this.value)
this.$emit('input', this.value)
})
},
plugins: [
'autoresize autolink lists link image anchor',
'searchreplace visualblocks code',
'media contextmenu paste code'
],
forced_root_block : "", //!important
force_br_newlines : true, //!important
force_p_newlines : false, //!important
convert_urls: false,
relative_urls: false,
},
mounted() {
if (tinymce) {
tinymce.init({
selector: `#${this.id}`,
theme: "modern",
setup: editor => {
editor.on("init", e => {
if (this.value != undefined)
editor.setContent(this.value);
this.$emit("input", this.value);
});
},
plugins: [
"autoresize autolink lists link image anchor",
"searchreplace visualblocks code",
"media contextmenu paste code"
],
forced_root_block: "", //!important
force_br_newlines: true, //!important
force_p_newlines: false, //!important
convert_urls: false,
relative_urls: false,
toolbar: 'undo redo | eyecatcher | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
menubar: false,
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
init_instance_callback: (editor) => {
editor.on('KeyUp', (e) => {
this.$emit('input', editor.getContent());
});
editor.on('Change', (e) => {
this.$emit('input', editor.getContent());
});
toolbar:
"undo redo | eyecatcher | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
menubar: false,
image_advtab: true,
templates: [
{ title: "Test template 1", content: "Test 1" },
{ title: "Test template 2", content: "Test 2" }
],
init_instance_callback: editor => {
editor.on("KeyUp", e => {
this.$emit("input", editor.getContent());
});
editor.on("Change", e => {
this.$emit("input", editor.getContent());
});
this.myeditor = editor;
},
});
}
},
destroyed () {
if(tinymce) {
this.myeditor.destroy();
this.myeditor = editor;
}
});
}
},
destroyed() {
if (tinymce) {
this.myeditor.destroy();
}
}
}
}
};
</script>
62 changes: 38 additions & 24 deletions resources/assets/js/Snippet.vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,41 @@
<template>
<div class="snippet">
<div class="snippet__header">
<div class="snippet__namespace">
{{item.namespace}}/
</div>
<div class="snippet__key">
{{item.key}}
</div>
<div class="snippet__preview">
{{item.value | truncate(40)}}
</div>
<div class="snippet__locale">
{{item.locale}}
</div>
<div class="snippet__actions">
<div class="snippet__toggle" @click="toggle">Show</div>
<div class="snippet__save" @click="save" v-show="editorToggleState && showSave">Speichern</div>
</div>
<div class="snippet">
<div class="snippet__header">
<div class="snippet__key">
{{ item.key }}
</div>
<div class="snippet__body" v-if="showEditor">
<div class="snippet__editor" v-show="editorToggleState">
<editor :id="editorId" :value="item.value" v-on:input="updateValue"></editor>
</div>
<div class="snippet__namespace">
{{ item.namespace }}
</div>
<div class="snippet__preview">
{{ item.value | truncate(40) }}
</div>
<div class="snippet__locale">
{{ item.locale }}
</div>
<div class="snippet__actions">
<div
class="snippet__toggle"
@click="toggle">Show</div>
<div
class="snippet__save"
@click="save"
v-show="editorToggleState && showSave">Speichern</div>
</div>
</div>
<div
class="snippet__body"
v-if="showEditor">
<div
class="snippet__editor"
v-show="editorToggleState">
<editor
:id="editorId"
:value="item.value"
@input="updateValue"/>
</div>
</div>
</div>
</template>

<script>
Expand Down Expand Up @@ -73,6 +85,10 @@ export default {
background-color: #f5f5f5;
padding: 10px 10px;
}
.snippet__headerrow {
background-color: #fff;
border-bottom: 2px solid #ececec;
}
.snippet__namespace {
flex: 0 0 230px;
color: #b7b7b7;
Expand All @@ -94,8 +110,6 @@ export default {
word-wrap: break-word;
font-weight: bold;
padding: 5px 10px;
background-color: #f5f5f5;
/* color: #fff; */
word-break: break-all;
}
Expand Down
Loading

0 comments on commit 8c05a13

Please sign in to comment.