Skip to content

wait until the editor is created to initialize the listeners #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

wait until the editor is created to initialize the listeners #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 111 additions & 67 deletions src/examples/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@

<template>
<div id="app">
<h1>Vue adapter for the Froala WYSIWYG editor</h1>
<div class="sample">
<h2>Sample 1: Inline Edit</h2>
<froala :config="titleOptions" v-model="myTitle"></froala>
<input v-model="myTitle"/>
<input v-model="myTitle" />
</div>

<div class="sample">
<div class="sample">
<h2>Sample 2: Full Editor</h2>
<froala v-model="content"></froala>
<h4>Rendered Content:</h4>
Expand All @@ -23,73 +22,119 @@

<div class="sample">
<h2>Sample 4: Manual Initialization</h2>
<button class="manual" v-on:click="createEditor()" v-if="!showEditor">Initialize Editor</button>
<button v-on:click="destroyEditor()" v-if="showEditor">Close Editor</button>
<button class="manual" v-on:click="createEditor()" v-if="!showEditor">
Initialize Editor
</button>
<button v-on:click="destroyEditor()" v-if="showEditor">
Close Editor
</button>
<button v-on:click="deleteAll()" v-if="showEditor">Delete All</button>
<froala id="sample5" :onManualControllerReady="initialize" v-model="sample3Text">Check out the <a href="https://www.froala.com/wysiwyg-editor">Froala Editor</a></froala>
<froala
id="sample5"
:onManualControllerReady="initialize"
v-model="sample3Text"
>Check out the
<a href="https://www.froala.com/wysiwyg-editor"
>Froala Editor</a
></froala
>
</div>

<div class="sample">
<h2>Sample 5: Editor on 'img' tag. Two way binding. Style is ignored (vueIgnoreAttrs) and will not be updated in the model.</h2>
<froala id="sample6" :tag="'img'" :config="imageOptions" v-model="imgModel"></froala>
<froala id="sample7" :tag="'img'" :config="imageOptions" v-model="imgModel"></froala>
<h2>
Sample 5: Editor on 'img' tag. Two way binding. Style is ignored
(vueIgnoreAttrs) and will not be updated in the model.
</h2>
<froala
id="sample6"
:tag="'img'"
:config="imageOptions"
v-model="imgModel"
></froala>
<froala
id="sample7"
:tag="'img'"
:config="imageOptions"
v-model="imgModel"
></froala>
<h4>Model Obj:</h4>
<div>{{imgModel}}</div>
<div>{{ imgModel }}</div>
</div>

<div class="sample">
<h2>Sample 6: Editor on 'button' tag</h2>
<froala id="sample8" :tag="'button'" v-model="buttonModel"></froala>
<h4>Model Obj:</h4>
<div>{{buttonModel}}</div>
<div>{{ buttonModel }}</div>
</div>


<div class="sample">
<h2>Sample 7: Editor on 'input' tag</h2>
<froala id="sample9" :tag="'input'" v-model="inputModel"></froala>
<h4>Model Obj:</h4>
<div>{{inputModel}}</div>
<div>{{ inputModel }}</div>
</div>

<div class="sample">
<h2>Sample 8: Editor on 'a' tag. Manual Initialization</h2>
<button class="manual" v-on:click="linkCreateEditor()" v-if="!linkShowEditor">Initialize Editor</button>
<button v-on:click="linkDestroyEditor()" v-if="linkShowEditor">Close Editor</button>
<button
class="manual"
v-on:click="linkCreateEditor()"
v-if="!linkShowEditor"
>
Initialize Editor
</button>
<button v-on:click="linkDestroyEditor()" v-if="linkShowEditor">
Close Editor
</button>
<div>
<froala id="sample10" class="blabla" :tag="'a'" :onManualControllerReady="initializeLink" v-model="linkModel">Froala Editor</froala>
<froala
id="sample10"
class="blabla"
:tag="'a'"
:onManualControllerReady="initializeLink"
v-model="linkModel"
>Froala Editor</froala
>
</div>
<h4>Model Obj:</h4>
<div>{{linkModel}}</div>
<div>{{ linkModel }}</div>
</div>

<div class="sample">
<h2>Sample 9: Editor that can be toggled</h2>
<button @click="sample9Shown = !sample9Shown">Toggle Editor</button>
<div v-if="sample9Shown">
<froala :config="titleOptions" v-model="sample9Model" />
</div>
<div v-html="sample9Model" />
</div>
</div>
</template>

<script>
export default {
name: 'app',
data () {
name: "app",
data() {
return {

// Sample 1
myTitle: '',
myTitle: "",
titleOptions: {
placeholderText: 'Edit Your Content Here!',
placeholderText: "Edit Your Content Here!",
charCounterCount: false,
toolbarInline: true,
events: {
'initialized': function() {
console.log('initialized', this);
initialized: function() {
console.log("initialized", this);
}
}
},

// Sample 2
content: '<span>My Document\'s Title</span>',
content: "<span>My Document's Title</span>",

// Sample 3
twoWayContent: '',
twoWayContent: "",

// Sample 4
sample3Text: null,
Expand All @@ -104,31 +149,31 @@ export default {
this.initControls.initialize();
this.showEditor = true;
},
initialize: (initControls) => {
initialize: initControls => {
this.initControls = initControls;
this.deleteAll = () => {
this.initControls.getEditor().html.set('');
this.initControls.getEditor().undo.reset();
this.initControls.getEditor().undo.saveStep();
this.initControls.getEditor().html.set("");
this.initControls.getEditor().undo.reset();
this.initControls.getEditor().undo.saveStep();
};
},

// Sample 5
imgModel: {
src: require('./image.jpg')
src: require("./image.jpg")
},
imageOptions: {
vueIgnoreAttrs: ['style']
vueIgnoreAttrs: ["style"]
},

// Sample 6
buttonModel: {
innerHTML: 'Click Me'
innerHTML: "Click Me"
},

// Sample 7
inputModel: {
placeholder: 'I am an input!'
placeholder: "I am an input!"
},

// Sample 8
Expand All @@ -137,49 +182,48 @@ export default {
linkCreateEditor: () => {
this.linkInitControls.initialize();
this.linkShowEditor = true;

},
linkDestroyEditor: () => {
this.linkInitControls.destroy();
this.linkShowEditor = false;
},
initializeLink: (linkInitControls) => {
initializeLink: linkInitControls => {
this.linkInitControls = linkInitControls;
},
linkModel: {
href: 'https://www.froala.com/wysiwyg-editor'
}
}
href: "https://www.froala.com/wysiwyg-editor"
},
sample9Shown: false,
sample9Model: null
};
},
created() {

}
}
created() {}
};
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
body {
padding: 20px;
}

.sample {
padding-bottom: 50px;
margin-left: 30px;
border-top: 1px solid lightgray;
}

.manual {
margin-bottom: 20px;
}

.button {
margin-left: 5px;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
body {
padding: 20px;
}

.sample {
padding-bottom: 50px;
margin-left: 30px;
border-top: 1px solid lightgray;
}

.manual {
margin-bottom: 20px;
}

.button {
margin-left: 5px;
}
</style>
10 changes: 4 additions & 6 deletions src/vue-froala.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,13 @@ export default (Vue, Options = {}) => {

this.currentConfig = this.config || this.defaultConfig;

this._editor = new FroalaEditor(this.$el, this.currentConfig, () => {
this.initListeners();
this.editorInitialized = true;
});
this.setContent(true);

// Bind editor events.
this.registerEvents();
this.initListeners();

this._editor = new FroalaEditor(this.$el, this.currentConfig)

this.editorInitialized = true;

},

Expand Down