rich text editor作るのめんどくさすぎる
2023/3/24 23:00:00
フレームワーク変えたら文書のデータ構造も変わってすごいめんどくさいことになるんでしょッ!!!!!そんな気がする!!!
フレームワーク変えたら文書のデータ構造も変わってすごいめんどくさいことになるんでしょッ!!!!!そんな気がする!!!
//Editor.tsx
import React, { useState, useEffect } from 'react';
import Quill from 'quill';
let quill:Quill | null = null
export default function Editor({style}:any) {
useEffect(() => {
if(!quill) {
quill = new Quill('#editor', {
modules: {
toolbar: [
[{ header: [1, 2, 3, false] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline'],
['image', 'code-block', 'blockquote']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
}
});
return (
<div style={style}>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<div id="editor">
</div>
</div>
);
}
//App.tsx
import Editor from "./Editor";
function App() {
return (
<div className="App" style={{display:"flex", alignItems:"center", flexDirection:"column"}}>
<br/>
<Editor style={{width:"80vw", height:"300px"}} />
</div>
);
}
export default App;
Reactよく分かってないので間違った作りしてそう。