Полимерные проблемы с contenteditable, execCommand и insertunorderedlist
Я пишу очень простой редактор с расширенными возможностями WYSIWYG, используя атрибут Polymer 2.0 и contenteditable для div, но испытываю проблемы с document.execCommand и выполняю команду insertunorderedlist. Если вы выберете и выделите текст, в который хотите вставить неупорядоченный список, и нажмите кнопку, тогда он либо не работает правильно в Chrome (последняя версия), либо при использовании Safari (последняя версия High Sierra) просто зависает. Если вы попробуете это за пределами Polymer (простой старый HTML и javascript), он будет работать нормально. Есть идеи, как заставить это работать с Polymer 2.0? Вот мой код:
<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">
<dom-module id = "polymerbasic-app">
<template>
<style>
:host {
display: block;
}
</style>
<button on-click = "_insertunorderedlist" type = "button">Insert Unordered List</button>
<div id = "textBox" contenteditable = "true">
Bullet One
<br> Bullet Two
<br> Bullet Three
</div>
</template>
<script>
/**
* @customElement
* @polymer
*/
class PolymerbasicApp extends Polymer.Element {
static get is() { return 'polymerbasic-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymerbasic-app'
}
};
}
_insertunorderedlist() {
document.execCommand("insertunorderedlist", false, null); this.$.textBox.focus();
}
}
window.customElements.define(PolymerbasicApp.is, PolymerbasicApp);
</script>
</dom-module>
И index.html:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymerbasic</title>
<meta name = "description" content = "polymerbasic description">
<link rel = "manifest" href = "/manifest.json">
<script src = "/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel = "import" href = "/src/polymerbasic-app/polymerbasic-app.html">
</head>
<body>
<polymerbasic-app></polymerbasic-app>
</body>
</html>
Это странно, как в Safari, той же версии, что и у вас, он зависает, когда я выбираю и выделяю текст Bullet One, Two и Three, а затем нажимаю кнопку. Вы выделяли и выделяли текст перед нажатием кнопки? Спасибо за помощь.
Да, сделал, и все заработало, как ожидалось. Я даже протестировал ваш код в Chrome (63.0.3239.108) в Linux, и он тоже сработал.
Спасибо. Я попробовал еще раз, но он все еще зависает при использовании Safari (11.0.3) на Mac (High Sierra). Я отредактировал и включил полный код, чтобы убедиться, что вы делаете то же самое. Я использую Polymer 2.6.0 и webcomponentsjs 1.1.1. Он зависает только тогда, когда вы выбираете / выделяете две или более строк текста, чтобы превратить их в неупорядоченный список.
Большое спасибо за предоставленный полный исходный код, версии Polymer и webcomponents.js, а также за то, что он зависает при использовании Safari. Я попробую еще раз позже.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Консоль отображает какие-либо ошибки? Я протестировал ваш код в Chrome (65.0.3325.162) и Safari (11.0.3) на Mac (High Sierra), и он отлично работает в обоих браузерах.