常連

railsのAction Textを導入したところ、この様なレイアウトになってしまいます。
![ActionText](4abc3eafa8c4e717308a24e0098a53ea.png)
それをこの画像の様に本来のレイアウトに戻したいです。
![イメージ説明](fec10bd9acbc5c3116864b92f1c49b6d.png)
調べてみたところ、bootstrapをプロジェクト内で導入している事が原因だと考えられるのですが、この要素だけbootstrapを適用させない方法はありますでしょうか。

posts/new.html.haml
```
.form-group
  = f.label :text, '投稿内容', class: "form-item"
  = f.rich_text_area :content //ここのbootstrapを無効にしたいです
```

追記
```html
.form-group
  = f.label :text, '投稿内容', class: "form-item"
  = f.rich_text_area :content, class: "content"
```

```css
:not(.content){
  @import "bootstrap";
}
```

bootstrapを部分的に無効にしたい

ユーザーにwysiwygエディタを使って記事を投稿してもらうサイトを作成しています。

ユーザーの入力値にhtmlタグが混入するため、DBへの保存時や画面に表示する時にhtmlspecialcharsを通せばOK、というわけには行きません。

今行っている対応として、
1. strip_tagsで特定タグ以外のタグを探す
2. 入力値の中に`javascript:`という文字列が無いか探す

の2点を試しているのですが、XSS脆弱性は大変危険なのでこれで十分なのか漠然とした不安があります。

もう少し包括的かつシンプルなセオリーが有れば嬉しいのですが、そういった知見をお持ちの方、ご教授頂けると幸いです。

# 環境
- wysiwygエディタにはsummernoteを使用しています。
- サーバサイドはLaravel5.8を使用しています。

ユーザの入力内容に含まれるhtmlタグを適切に処理したい

javascriptのWYSIWYGエディター「CKEditor5」で、編集エリア内で改行をすると文章がpタグで囲われます。これをpではなく、brタグで改行させるにはどうすれば良いでしょうか。よろしくお願いいたしますm(_ _)m

CKEditor5で改行をpではなく、brタグに変更する方法

JavaScriptから、マウスで選択した部分を太字や斜字、取り消し線などにしたいです。　
イメージとしては、
[リンク内容](https://jaredreich.com/pell/)
のような感じなのですが、いま欲しい機能は太字、斜字、下線、取り消し線だけなので、このようなライブラリを使わず自作したいと考えています。

やってみたコード
```JavaScript
//ボタンを押したら斜字にしたい
document.getElementById("btn").onclick  = function(){
var sel = window.getSelection();
sel.style.fontStyle = "italic";
}
```

エラー
Cannot set property 'fontStyle' of undefined


どのようにすればよいのでしょうか？初歩的なことかもしれませんが、ご教授いただければ幸いです。

マウスで選択した部分を太字や斜字などにしたい

### 前提・実現したいこと
railsで、WYSIWYGエディタのsummernoteを使用しています。
カスタムしているのですが、同じコードをコピペしても、
一方のページでは動作し、
一方のページでは動作しません（デフォルトが表示されていまします。）

これは、何が原因なのでしょうか？
皆目見当がつきませんでして、どなたが先輩エンジニア様に
教えてもらえると本当に助かります。
何時間も取られてしまっておりまして・・・どうぞお願いいたします????


### 発生している問題・エラーメッセージ
同じコードなのに、ページ毎に挙動が異なってしまいます。

動作している側
```
<%= javascript_include_tag 'turbolinks' %>
<%= form_with url: '/events', method: :post, local: true, model:@event do |f| %>

<%= f.text_area :details, 'data-provider': :summernote %>
　<script>
　　$('#details').summernote({
　　　lang: 'ja-JP',								  　　　height: 200,									　　　disableDragAndDrop: true,
　　　toolbar: [
　　　　['style', ['bold', 'italic', 'underline']],
　　　　['font', ['strikethrough']],
　　　　['fontsize', ['fontsize']],
　　　　['fontname', ['fontname']],
　　　　['color', ['color']],
　　　　['para', ['ul', 'ol', 'paragraph']],
　　　　['height', ['height']],
　　　　['insert', ['link', 'picture', 'video']],
　　　]
　　});
　</script>

```

動作していない側

```ここに言語名を入力
<%= javascript_include_tag 'turbolinks' %>
　<%= form_with method: :PATCH ,local: true, model: @event do |f| %>
　　<script>
　　　$('#details').summernote({
　　　　lang: 'ja-JP',								  　　　　height: 200,									　　　　disableDragAndDrop: true,
　　　　toolbar: [
　　　　　['style', ['bold', 'italic', 'underline']],
　　　　　['font', ['strikethrough']],
　　　　　['fontsize', ['fontsize']],
　　　　　['fontname', ['fontname']],
　　　　　['color', ['color']],
　　　　　['para', ['ul', 'ol', 'paragraph']],
　　　　　['height', ['height']],
　　　　　['insert', ['link', 'picture', 'video']],
　　　　]
　　　});
　　</script>
```

そもそも、コピペでjavascriptが機能しない場合というのは、
どんなことが考えられますでしょうか？

全くお手上げでして、本当に困っています。。
どうか、教えて頂けますと幸いです。
どうぞよろしくお願いいたします。

summernoteを使っていますが、全く同じコードにもかかわらず別ページでは動作しないです。助けて欲しいです。。

### 前提・実現したいこと

ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化にならないため、自作で機能を絞って実装する方向に舵を切っています。

以下の操作でリンク挿入できる機能を開発しています。
1. contenteditableのエディタ領域上でリンクで囲みたい文字列を選択
2. エディタ領域外に配置したリンク挿入ボタンをクリック
3. モーダルがポップアップし、URL入力フィールドにURLを入力し、挿入ボタンをクリック
4. contenteditableのエディタ領域上の囲んだ文字列がリンクで囲まれた状態になる

### 発生している問題・エラーメッセージ
困っているのは、3でURLを入力するとgetSelentionで選択されているのがモーダルになってしまい、4でのリンク挿入が行われません。その後もう一度リンク挿入ボタンをクリックして、モーダルのURLを変更せずに挿入ボタンをクリックすると、リンクの挿入はうまくいきます。

このため2の操作で選択範囲自体を保存し、4の操作の前に再度同じ範囲が選択された状態にしてから、リンクで囲むようにしたいと思っています。
このような実装を行いたい場合、どのメソッドなどを使えばよいかご教示いただけますか？
調べてはみたのですが、当てはまるようなサンプルが見当たらず困っております。
もちろん、上記手順での操作が可能であれば、別のアプローチでのアドバイスも頂けると大変ありがたいです。

### 該当のソースコード
3で挿入ボタンをクリックすると呼ばれる処理が以下になります。
```javascript
function add_link(){
var link_url = document.getElementById('textarea_link_url').value;

var sel = window.getSelection();
var range = sel.getRangeAt(0);
var newNode = document.createElement('a');
newNode.href=link_url;
var dom=range.cloneContents();
newNode.appendChild(dom);
range.deleteContents();  
range.insertNode(newNode);
                        
sel.removeAllRanges();
}
```

### 試したこと
getSelectionの返り値を格納するselや、getRangeAt(0)の返り値を格納するrangeについては、別のグローバル変数に格納して試してみましたが、モーダル上でURLを入力すると別の変数になっているはずが、その変数側もモーダル自体が選択された状態に中身が変わってしまいました。


contenteditable での選択範囲の保存と再選択

### 前提
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。

### 実現したいこと
コピペ時のスタイル情報を削除するため、以下の操作でペーストできる機能を開発しています。

0. contenteditableのエディタ領域(id="text_editable")上でペーストして置き換えたい文字列を選択
0. ペースト実施
0. 文字列が置き換えられ、選択した文字列の開始位置にカーソルが移動

### 発生している問題・エラーメッセージ
ペースト実施後にカーソルがエディタ部の先頭に移動してしまいます。
対処法がもしお分かりになればご教授いただきたいです。

### 該当のソースコード

```Javascript
function paste(){
  let paste = (event.clipboardData || window.clipboardData).getData('text');
  event.preventDefault();
                    
  var sel = window.getSelection();
  var range = sel.getRangeAt(0);
  var newNode = document.createTextNode(paste);
  range.deleteContents();  
  range.insertNode(newNode);

  var area = document.getElementById('text_editable'); 
  if(sel.anchorOffset<sel.focusOffset){
    range.setStart(area, sel.anchorOffset);
  }else{
    range.setStart(area, sel.focusOffset);
  }
  var new_area=area.innerHTML;
  new_area=new_area.replace(/ /g,"&nbsp;");
  new_area=new_area.replace(/\\n/g,"<br>");
  text_editable.innerHTML = new_area;
  sel.removeAllRanges();
  }
}
```

### 試したこと
最初はカーソルが表示されていなかったので、以下を参考にsetStartの行を追加したのですが、「選択した文字列の開始位置」に移動してくれません。
https://proglearn.com/2021/02/12/contenteditable%E3%81%AA%E8%A6%81%E7%B4%A0%E3%81%A7%E3%82%AD%E3%83%A3%E3%83%AC%E3%83%83%E3%83%88%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E3%82%92%E6%96%87%E6%9C%AB%E3%81%AB%E7%A7%BB%E5%8B%95%E3%81%95/

contenteditable でのペースト後、カーソルが先頭に移動してしまう

フロント周りが弱く、的外れな事を記載してたらすみません。

### 実現したいこと
*rails7にオンラインビルドツールを利用してプラグイン(SourceEditing)を導入したい

オンラインビルドツールから一式DLしました。
https://ckeditor.com/ckeditor-5/builder/

これをビルドしてプロジェクトに導入しようとしてます。

最初はrailsアプリ内でビルドしようとしましたが、プロジェクトのnode.jsやesbuildとのバージョン問題があり断念。
なのでプロジェクト外でビルドしてrailsプロジェクトに取り込む事にしました。

そこまでの手順は以下の通りです。
間違っている箇所があればご指摘いただけると幸いです。

１．オンラインビルドツールで使用するプラグインを選択しDL。
DLしたディレクトリの中身は以下の通りです
↓
index.html
main.js
package.json
style.css
vite.config.js

２．DLしたディレクトリ内でインストールとビルド
npm install
npm run build

３．ビルド後のファイルをrailsアプリにコピー
　３−１．dist/assetsに出来たindex-Dxxx.jsとindex-Dvxxx.cssファイルを
　main.jss、style.cssにリネーム

　３−２．railsアプリにコピー
　以下に配置
　app/frontend/javascript/ckeditor/main.js
　app/frontend/javascript/ckeditor/style.css

４．application.jsに以下を追加
app/frontend/javascript/application.js
```javascript

import { ClassicEditor, AccessibilityHelp, Autosave, Bold, Essentials, Italic, Paragraph, SelectAll, SourceEditing, Undo } from './ckeditor/main';
import './ckeditor/style.css';

const editorConfig = {
	toolbar: {
		items: ['bold', 'italic'],
		shouldNotGroupWhenFull: true
	},
	//plugins: [AccessibilityHelp, Autosave, Bold, Essentials, Italic, Paragraph, SelectAll, SourceEditing, Undo],
	initialData: '',
			language: 'ja',
	placeholder: 'Type or paste your content here!',
	//translations: [translations]
};
ClassicEditor.create(document.querySelector('#editor'), editorConfig);

```




### 発生している問題・分からないこと
ファイルを保存すると、以下のようにエラーになります。

```ここに言語を入力
% yarn build:js-dev
yarn run v1.22.19
$ WATCH=true node esbuild.config.js
✘ [ERROR] No matching export in "app/frontend/javascript/ckeditor/main.js" for import "ClassicEditor"

    app/frontend/javascript/application.js:83:9:
      83 │ import { ClassicEditor, AccessibilityHelp, Autosave, Bold, Essentials, Italic, Paragraph, SelectAll, SourceEditing, Undo } from './ckeditor/main';
         ╵          ~~~~~~~~~~~~~

```

認識が出来ていないのでしょうか？


分かる方原因を教えていただけると幸いです。
宜しくお願い致します。







### エラーメッセージ
```error
ブラウザのコンソールには以下のエラーが出てます
TypeError: main_default.create is not a function
```

### 該当のソースコード

DLしたディレクトリ内のpackage.json

```javascript

{
  "name": "ckeditor5-vanilla.js",
  "version": "0.0.1",
  "scripts": {
    "start": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^5",
    "ckeditor5": "42.0.1",
    "ckeditor5-premium-features": "42.0.1"
  }
}



```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
railsプロジェクト内で
npm install ckeditor5
で導入する
プラグインなしのパッケージは動作確認済みしました。



### 補足
特になし