阅读数:311 评论数:0

一、概述

https://www.tiny.cloud/docs/

二、svg被自动删除问题

1、原因

TinyMCE会自动删除掉空的或者无效的tags。

2、解决方法

（1）在初始化时

tinymce.init({
...
extended_valid_elements: "svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]"
});

（3）下面三种方式选择一种即可。

svg元素添加name属性

<svg name="something"

svg元素添加data-mce相关的属性

<svg data-mce-something="something"

在svg元素内部添加一些文本内容

<svg>&nbsp;</svg>

三、tinymce启动tab键

TinyMCE 编辑器默认情况下并不支持在编辑器中使用 Tab 键来插入制表符（tab），因为 Tab 键通常用于在页面元素之间导航。

tinymce.init({
  selector: '#mytextarea',
  setup: function(editor) {
    editor.on('keydown', function(e) {
      if (e.keyCode === 9) { // tab key
        if (e.shiftKey) {
          // Shift+Tab was pressed
          e.preventDefault(); // prevent default tab action

          // 实现反向缩进的逻辑
          // 这里的代码将依赖于你如何定义“反向缩进”
          // 例如，你可以查找当前光标位置前的空格或制表符，并删除它们
          // 下面的代码只是一个简单的例子，可能需要根据你的具体情况调整
          editor.undoManager.transact(function() {
            var node = editor.selection.getNode(); // 获取当前选中的节点
            if (node && node.textContent.startsWith('\u00a0\u00a0\u00a0\u00a0')) {
              // 如果当前节点以四个连续的非断行空格开头（即我们用来代替制表符的空格）
              // 则删除这四个空格
              node.textContent = node.textContent.substring(4);
              editor.selection.setCursorLocation(node, 0);
            }
          });
        } else {
          // Tab was pressed without Shift
          e.preventDefault(); // prevent default tab action
          // 插入制表符或空格
          editor.insertContent('    ');
        }
      }
    });
  }
});

四、快捷键