TinyMCE: как разрешить пользователю отмечать текст, когда «readonly: true;»

Question

Я хочу позволить пользователям выбирать (и копировать) текст в TinyMCE.

Я не совсем уверен, но с точки зрения безопасности кажется, что браузеры не позволяют этого.

Этот Codepen взят с официального сайта TinyMCE: https://codepen.io/tinymce/pen/NGegZK

Здесь вы можете выбрать текст.

Если вы добавите следующий параметр во 2-й строке JavaScript, как показано ниже, вы не сможете больше выделять текст.

  readonly: true,

Как я могу установить «readonly: true» и позволить пользователю по-прежнему выделять текст?

Я ценю любую помощь.

Answer 1

Ранее можно было выбирать текст в режиме только для чтения, пока исправление для # 4249 не сломало его в 4.7.12.

Мы только что начали отслеживать исправление, позволяющее выбирать текст и щелкать ссылки, перейдите по одной из ссылок, указанных здесь, для обновления после выпуска исправления.

Answer 2

Я тоже столкнулся с этой проблемой. Более того, невозможность выделить текст ничто по сравнению с невозможностью нажимать на ссылки. Я отправил вопрос об этом некоторое время назад, но реакции до сих пор нет.

Вы можете использовать обходной путь сейчас ( codepen ):

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

В нем используется тот факт, что код блокировки событий внутренне использует строгое сравнение (readonly === true), тогда как остальная часть кода отлично работает с любым другим истинным значением, например, 1. Конечно, этот хак может перестать работать после обновления в будущем, но это гораздо лучше, чем ничего.

Обновление: лучше переключиться в режим inline ( codepen ), если вы используете этот хак. В противном случае переход по ссылкам приводит к путанице.

Answer 3

Я решил эту проблему для достижения режима readonly самостоятельно, я бы создал узел 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

Я проверил исходный код последней ночи, и похоже, что поведение жестко закодировано. Все события отбрасываются, если редактор находится в режиме только для чтения. Это означает, что события выбора также отбрасываются:

  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();
    }
  };

Я могу ошибаться, но я не думаю, что вы можете изменить это поведение с помощью настройки.

Привет