tinyMCE使用時、pタグ内のテキスト背景色を変更後、別の箇所の背景色を変更すると、先に変更した箇所も連動して背景色が変更されてしまいます。
具体的にはtinyMCEエディタ内にテキストを入力し、先頭の文字の背景色とフォントサイズを変更、その後に末尾の文字背景を変更すると、それに連動して先頭の文字背景色も変更されてしまいます。
当初は、拡張したソースコードが原因かと思い一度全て下記URLの設定と同じにし、forecolorとbackcolorを追加した状態でテストを行いましたが、それでも上記の問題が起きました。
https://www.tinymce.com/docs/demo/full-featured/
後続の文字の背景色を変更する前にフォントサイズを変更すれば、このような問題は起きず、また単純に背景色を変更するだけでも、この問題はおきません。
選択した箇所のDOMも見るときに何かしら問題が起きているのでは?と思いましたが、現状まだ解決できていません。
お手数おかけしますが、何かしらの知恵をお借りできると幸いです。
なおTinyMCEのバージョンは4.5.5です
また下記がhtml,jsのソースコードです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form method="post">
<textarea id="foo" class="js-tinymce" name="foo"></textarea>
<input type="submit" value="送信">
</form>
<script src="tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
],
toolbar1: 'undo redo | insert | styleselect | bold italic fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
});
</script>
</body>
</html>