帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

简洁的Vue富文本编辑器组件/插件(vue-trumbowyg)

帝国模板之家 2021-01-05 网页特效 评论

介绍

一个Vue.js 2编辑器组件/插件,用于在应用程序上实现 Trumbowyg WYSIWYG编辑器。

特征

反应v-model值
可以通过编程方式更改编辑器值
事件处理
支持大多数插件
使用vee validate验证库

使用方法

<template>

  <textarea></textarea>

</template>

<script type="text/javascript">
  import jQuery from 'jquery';
  import 'trumbowyg';
  // You have to import css yourself
  // You have to configure webpack to load svg files
  import svgIcons from 'trumbowyg/dist/ui/icons.svg';
  // https://alex-d.github.io/Trumbowyg/documentation/#events
  const events = ['focus', 'blur', 'change', 'resize', 'paste', 'openfullscreen', 'closefullscreen', 'close'];
  export default {
    name: 'trumbowyg',
    props: {
      value: {
        default: null,
        required: true,
        validator(value) {
          return value === null || typeof value === 'string' || value instanceof String
        }
      },
      // http://alex-d.github.io/Trumbowyg/documentation.html#basic-options
      config: {
        type: Object,
        default: () => ({})
      },
      // https://alex-d.github.io/Trumbowyg/documentation/#svg-icons
      svgPath: {
        type: [String, Boolean],
        default: svgIcons,
      },
    },
    data() {
      return {
        // jQuery DOM
        el: null,
      }
    },
    mounted() {
      // Return early if instance is already loaded
      if (this.el) return;
      // Store DOM
      this.el = jQuery(this.$el);
      // Init editor with config
      this.el.trumbowyg(Object.assign({svgPath: this.svgPath}, this.config));
      // Set initial value
      this.el.trumbowyg('html', this.value);
      // Watch for further changes
      this.el.on('tbwchange', this.onChange);
      // Workaround : trumbowyg does not trigger change event on Ctrl+V
      this.el.on('tbwpaste', this.onChange);
      // Register events
      this.registerEvents();
    },
    beforeDestroy() {
      // Free up memory
      if (this.el) {
        this.el.trumbowyg('destroy');
        this.el = null;
      }
    },
    watch: {
      /**
       * Listen to change from outside of component and update DOM
       *
       * @param newValue String
       */
      value(newValue) {
        if (this.el) {
          // Prevent multiple input events
          if (newValue === this.el.trumbowyg('html')) return;
          // Set new value
          this.el.trumbowyg('html', newValue)
        }
      },
    },
    methods: {
      /**
       * Emit input event with current editor value
       * This will update v-model on parent component
       * This method gets called when value gets changed by editor itself
       *
       * @param event
       */
      onChange(event) {
        this.$emit('input', event.target.value);
      },
      /**
       * Emit all available events
       */
      registerEvents() {
        events.forEach((name) => {
          this.el.on(`tbw${name}`, (...args) => {
            this.$emit(`tbw-${name}`, ...args);
          });
        })
      }
    }
  };
</script>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言