Tiptap Lib。如何为 EditorContent 添加边框？

Question

我很难编辑编辑器部分样式

我正在使用 https://tiptap.dev/docs/editor/ Recat 中的 Lib

现在我用这个渲染编辑器

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

我的CSS

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

未点击文本框时的结果

单击文本框时的结果

我想为此自定义 css 样式。有这方面的文档吗？

Answer 1

Tiptap，Vue.js 的富文本编辑器框架。要向 EditorContent 组件添加边框，您可以使用 CSS 自定义样式。但是，请记住，Tiptap 不提供开箱即用的编辑器内容的直接样式，因此您必须将样式应用于 Tiptap 生成的 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 规则的范围将仅影响该组件内的元素。🌟

🟢🟡🟣 您可以探索 Tiptap 文档： https://tiptap.dev/docs/editor/guide/styling