Question

我想让用户在TinyMCE中选择（并复制）文本。

~~我不太确定，但考虑到安全性，浏览器不允许这样做。~~

此Codepen来自TinyMCE官方网站： https://codepen.io/tinymce/pen/NGegZK

在这里您可以选择文本。

当您在JavaScript的第二行中按如下所示添加以下参数时，就无法再选择文本。

  readonly: true,

如何设置“ readonly：true”，让用户仍然选择文本？

感谢您的帮助。

Answer 1

我已经检查了最近一晚的源代码，看来该行为是硬编码的。如果编辑器处于只读模式，则所有事件都将被丢弃。这意味着选择事件也将被丢弃：

  var isListening = function (editor) {
    return !editor.hidden && !editor.readonly;
  };
  var fireEvent = function (editor, eventName, e) {
    if (isListening(editor)) {
      editor.fire(eventName, e);
    } else if (isReadOnly(editor)) {
      e.preventDefault();
    }
  };

我可能是错的，但我认为您无法通过自定义更改此行为。

致谢

Answer 2

我也遇到了这个问题。此外，与无法单击链接相比，无法选择文本是什么。不久前，我已经提交了一个issue，但仍然没有任何反应。

您现在可以使用变通办法（codepen）：

  readonly: 1,
  setup: function(editor) {
    editor.on('SwitchMode', function() {
      if (editor.readonly) {
        editor.readonly = 1;
      }
    });
  }

它利用了以下事实：事件阻止代码在内部使用严格的比较（readonly === true），而代码的其余部分可以与任何其他真实值一起正常工作，例如1。当然，这种hack将来可能会在更新后停止工作，但是总比没有好。

更新：如果使用此技巧，最好切换到inline模式（codepen）。否则，单击链接会导致混乱。

Answer 3

我自己解决了此问题，以实现只读模式，我将创建一个iframe dom节点，并将编辑器的html段放入其中。

  renderReportPreview = contentHtml => {
    const iframe = document.querySelector('iframe[name=preview]')
    if (iframe) {
      const cssLink = document.createElement('link')
      // cssLink.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
      // I prefer semantic-ui, semantic-ui is more like tinyMce style
      cssLink.href = 'https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css'
      cssLink.rel = 'stylesheet'
      cssLink.type = 'text/css'
      iframe.contentWindow.document.head.appendChild(cssLink)
      // I escape the origin editor's content, so I need decode them back
      iframe.contentWindow.document.body.innerHTML = htmlDecode(contentHtml)
      const allTables = iframe.contentWindow.document.body.querySelectorAll(
        'table'
      )
      Array.from(allTables).forEach(table => {
        // ui celled table for compatible semantic-ui
        // table table-bordered for compatible bootstrap
        table.className = 'ui celled table table-bordered'
      })
      this.setState({
        previewRendered: true,
      })
    }
  }

有关https://github.com/tinymce/tinymce/issues/4575的详细信息

Answer 4

以前，可以以只读模式选择文本，直到#4249的修复程序在4.7.12中将其破坏为止。

我们刚刚开始跟踪一个修复程序，该修复程序允许选择文本和单击链接，发布修复程序时，请按照此处链接的任何票证进行更新。

TinyMCE：当“ readonly：true;”时如何让用户标记文本

4 个答案: