Guest User

Untitled

a guest
Jul 20th, 2018
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.83 KB | None | 0 0
  1. <template>
  2. <div>
  3. <textarea class="form-control question-create-editor" id="question_description" placeholder="Go wild with all the details here - make image upload work" rows="3">
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. props: ['redactorValue'],
  10. mounted: function(){
  11. $('#question-create-form .question-create-editor').redactor({
  12. imageUpload:'/urlGoesHereBro/',
  13. plugins: ['video', 'imagemanager', 'counter', 'limiter'],
  14. buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
  15. });
  16. },
  17. computed: {
  18. redactorValue: function(){
  19. $('#question-create-form .redactor-editor').on('keyup', function(){
  20. var textContent = $('#question-create-form .redactor-editor').html();
  21. console.log( 'textContent = ' + textContent );
  22. this.$emit('redactorValue', textContent);
  23. });
  24. }
  25. }
  26. };
  27.  
  28. <vueredactor></vueredactor>
  29.  
  30. export default {
  31. data(){
  32. return {
  33. redactorValue: null
  34. }
  35. },
  36. mounted: function(){
  37. $('#question-create-form .question-create-editor').redactor({
  38. imageUpload:'/urlGoesHereBro/',
  39. plugins: ['video', 'imagemanager', 'counter', 'limiter'],
  40. buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
  41. });
  42.  
  43. $('#question-create-form .redactor-editor').on('keyup', function(){
  44. this.redactorValue = $('#question-create-form .redactor-editor').html();
  45. }.bind(this));
  46. }
  47. };
  48.  
  49. <template>
  50. <div>
  51. <textarea class="form-control question-create-editor" id="question_description" placeholder="Go wild with all the details here - make image upload work" rows="3">
  52. </div>
  53. </template>
  54.  
  55. <script>
  56. export default {
  57. props: ['value'],
  58. data(){
  59. return {
  60. redactorValue: null
  61. }
  62. },
  63. mounted: function(){
  64. $('#question-create-form .question-create-editor').redactor({
  65. imageUpload:'/urlGoesHereBro/',
  66. plugins: ['video', 'imagemanager', 'counter', 'limiter'],
  67. buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
  68. });
  69.  
  70. $('#question-create-form .redactor-editor').on('blur', function(){
  71. this.redactorValue = $('#question-create-form .redactor-editor').html();
  72. this.$emit('input', this.redactorValue);
  73. }.bind(this));
  74. }
  75. };
  76. </script>
  77.  
  78. Vue.component('vueredactor', require('./components/redactor.vue'));
  79.  
  80. var App = new Vue({
  81. el: '#app',
  82. data: {
  83. redactorContent: null
  84. }
  85. });
  86.  
  87. <div id="app>
  88. <vueredactor v-model="redactorContent"></vueredactor>
  89. </div>
Add Comment
Please, Sign In to add comment