1

JavaScriptリッチテキストエディタを開発しています。ボタンの代わりに、cssプロパティでdivを使用していますuser-select: none。これはFirefoxで正常に機能しますが、問題はGoogleChromeにあります。

cssでdivをクリックするとuser-select: none、contenteditabledivから選択したテキストが失われます。HTMLとcssを以下に示します

<div id="editor">
   <div id="controls">
      <div id="button-bold"></div>
   </div>
   <div id="rte" contenteditable></div>
</div>

CSS

#button-bold
{
    width: 20px;
    height: 20px;
    padding: 2px;
    float: left;
    border: 1px solid #E7E7E5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#rte {
    width: 100%;
    min-height: 400px;
    margin: 5px;
    outline: none;
}
4

2 に答える 2

1

スタイルを変更するためのクリック可能なリンクを作成するには、divまたはspanの代わりにボタンを使用します。

次に、document.execcommand（'forecolor'、false、'＃000000'）;を使用します。

于 2014-06-11T16:23:40.783 に答える
0

私は同様の設定をしており、次の解決策はChromeで正常に機能します： jQueryを使用してテキスト選択を無効にする方法は？

答えは、「selectstart」イベントのハンドラーを追加することです。

于 2012-12-18T23:07:01.953 に答える