Vue Tinymce富文本组件自定义带下拉框的操作按钮

2023-12-30 10:39:40

?想实现如下效果

首先在init方法中的props，toolbar属性增加一个自定义按钮

增加一个setup方法

代码

          setup: function(editor) { 

            editor.ui.registry.addSplitButton('myDateButton', {
              text: '日期时间',
              onAction: (_) => editor.insertContent(getJsMonthDay(getNowDate()) + " " + getWeekday(getNowDate())),
              onItemAction: (buttonApi, value) => editor.insertContent(value),
              fetch: (callback) => {
                const items = [
                  {
                    type: 'choiceitem',
                    text: '当天 月-日 周几',
                    value: getJsMonthDay(getNowDate()) + " " + getWeekday(getNowDate())
                  },
                  {
                    type: 'choiceitem',
                    text: '本月 月-日 周几',
                    value: getMonthAllDays()
                  }
                ];
                callback(items);
              }
            });

          },

操作效果，下拉【日期日期】按钮，选择某项菜单，就会在光标所在处插入相应的字符。如下

文章来源:https://blog.csdn.net/gdgztt/article/details/135286685
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。