css React中的Tiptap Lib,如何将边框添加到EditorContent？

ljo96ir5 于 2024-01-09 发布在 React

关注(0)|答案(1)|浏览(134)

我很难编辑编辑器部分的风格
我在Recat中使用https://tiptap.dev/docs/editor/ Lib
现在我用这个渲染编辑器

<EditorContent 
className='editor'
editor={props.editor}/>

字符串
我的css

.editor p{
    margin: 1em 0;
    /* border: 1px solid #000; */
    /* border-radius: 2px; */
}

型
在文本框中未单击时的结果

的数据
在文本框中单击时的结果

的
我想自定义的css风格。任何文档对此？

css

来源：https://stackoverflow.com/questions/77777165/tiptap-lib-in-react-how-do-i-add-border-to-editorcontent

1条答案

按热度按时间

wdebmtf21#

Tippap，一个用于Vue.js的富文本编辑器框架。要向EditorContent组件添加边框，您可以使用CSS自定义样式。但是，请记住，Tippap不会为编辑器内容提供直接的样式，因此您必须将样式应用于Tippap生成的HTML元素。🔥
下面是一个如何为EditorContent添加边框的示例：

<template>
  <EditorContent :editor="editor" class="custom-editor-content" />
</template>

<style scoped>
/* Add your custom styles for the editor content */
.custom-editor-content {
  border: 1px solid #000;
  border-radius: 2px;
  padding: 10px; /* Optional: Add some padding for better aesthetics */
}

/* Customize other elements as needed */
.custom-editor-content p {
 margin: 1em 0;
}
</style>

字符串
在本例中，custom-editor-content类被应用于EditorContent组件，并且标签内的CSS规则将被限定为仅影响该组件内的元素。🌟
🟢🟡🟣你可以探索Tippap的：https://tiptap.dev/docs/editor/guide/styling

赞(0）回复(0）举报 2024-01-09

我来回答

css React中的Tiptap Lib,如何将边框添加到EditorContent？

1条答案

相关问题

热门标签

最新问答