标签: rich-text-editor

将文本从单词复制到wysihtml5编辑器时,文本会混乱(无论是格式还是附加添加的字符).这有一个简单的解决方案吗？我正在寻找的正确行为将是Stack Overflow的富文本编辑器的工作方式 - 从单词复制和粘贴的文本看起来与word文档相同.

谢谢!

更新: 为了解决粘贴的文字格式的格式问题,我"p": {},在使用的wysihtml5-0.30_rc2.js文件中添加了这一行.该行已在defaultOptions [parserRules] [tags]的声明中添加(请参阅used resources).

不过,现在我可以在粘贴文本的开头看到"字体定义"段落:

<!-- /* Font Definitions */ @font-face {font-family:Arial; panose-1:2 11 6 4 2 2 2 2 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; …

使用Javascript的Quill富文本编辑器,我试图让两个或更多编辑器共享同一个工具栏.

我想(从文档中)目前不可能立即实现这一点,所以我试图通过在编辑器上通过API添加工具栏模块来"模拟"这一点,该编辑器已被点击为后者:

// this uses jQuery
$editorTag.click(function(e){
    var tag = e.target;
    var editor = getEditorByTag(tag);
    if( editor )
        editor.addModule('toolbar',{container:'#toolbar'});
});

它似乎工作,但我怀疑Quill不喜欢在同一个对象上反复添加多次相同的模块,因为它最终会吐出:

(节点)警告:检测到可能的EventEmitter内存泄漏.11名听众补充道.使用emitter.setMaxListeners()来增加限制.quill.js(第4727行)

那么有没有办法删除以前添加的模块？就像是:

// installs editor
var editor = new Quill('#editor');
// adds toolbar module
editor.addModule('toolbar',{container:'#toolbar'});
// removes just added toolbar module
editor.removeModule('toolbar');

我正在 QuillJS 中创建一些自定义印迹。它们大多有效，但是我在复制和粘贴印迹时遇到问题，并认为这是由于未提供index(node: Node, offset: number): number或position(index: number, inclusive: boolean): [Node, number]实现。

印迹是 类型的blots/embed。他们生成的标记看起来像（我添加了一个sampleandspellcheck属性，并生成包含一个图标和一些文本的内容）： <sfx sample="A Sample" spellcheck="false"> &#65279; <span contenteditable="false"><i class="btr bt-volume-up"></i>A Sample</span> &#65279; </sfx>

如果我尝试自己选择印迹然后复制和粘贴，我只会粘贴 sfx 标签的内容，而不是新的嵌入实例......（顶部嵌入是预期的格式，底部是它的样子粘贴时。蓝色边框显示选择）。

如果我选择印迹并在选择中包含其他任何内容，例如左侧的空格，则复制/粘贴按预期工作。

我确实想要默认选择行为，即嵌入选择作为一个整体并且表现得像它的长度为 1。

我无法确定要做什么index以及position（假设这是原因？）来完成这项工作。任何人都可以通过描述我需要做什么并解释这些回调的行为方式来提供帮助（羊皮纸文档中的描述有点薄）。做类似事情的参考实现就足够了，我已经查看了 quill 内置的嵌入，但它们似乎没有帮助。

我觉得应该是一个相对简单的约束,我似乎无法找到解决方案.我正在尝试构建一组WYSIWYG组件样式,这些样式将灵活地一起工作,并且无法获得项目符号/编号列表的组合,以便可预测地围绕浮动数字进行包装而不会丢失缩进或导致重叠内容:

限制:

• 对于每个嵌套级别,嵌套列表应缩进更多
• 浮动内容可以浮动到右侧或左侧
• 列表可以任意长,并且应该可以预测地围绕浮动内容进行包装

这是具有"float:left"设置的内容右侧列表的默认样式.子弹与浮动内容重叠,并且压痕丢失.

.pull-left {
  background: #3333ff;
  color: white;
  float: left;
  width: 50%;
  height: 80px;
}

<div class="pull-left">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

在元素上设置值overflow(即overflow: hidden)可以<ul>修复项目符号格式+缩进,但不允许内容换行:

.pull-left {
  background: #3333ff;
  color: white;
  float: left;
  width: 50%;
  height: 80px;
}

ul {
  overflow: hidden;
}

<div class="pull-left">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item</li>
      <li>Nested …

默认情况下，Quill 支持图像、视频和公式等嵌入格式。如何使用 Quill Editor 嵌入 pdf 或 doc 文件？

我有一个包含帖子的博客。我还有一个富文本编辑器（Quill）。

是否可以检查富文本编辑器是否有空内容？

我使用 Quill（与 React、Express JS、MongoDB），并且我想以某种方式防止在数据库中存储空值。

问题是，如果我在编辑器中添加空格，Quill将会生成空段落。所以没有内容只有空段落。使用普通输入字段，我可以检查空字符串，但如果我有富文本编辑器怎么办？

问题：

<p>                     </p>

甚至更糟

<p>                            </p><p><br></p><p><br></p><p>       </p>

我真的不想将其保存到数据库中。因为我不想有空帖子。我该如何解决这个问题？可以以某种方式检查空段落的解决方案吗？...但是标签呢<br>？

请打开此代码和框，然后输入一堆空格，然后单击按钮。打开控制台，您将看到编辑器的输出。

代码沙盒： https: //dxqhq.codesandbox.io/

非常感谢

当我尝试制作博客时，我无法通过表单中的编辑器。我找到了这个：

DraftJS React-Hook-Form - 提交编辑器作为输入

但似乎 LexicalRichTextEditor 没有这样的标签可以传递。谁能帮我？如何传递属性来实现添加内容和修改内容功能？

type LexicalEditorProps = {
    //config: Parameters<typeof LexicalComposer>["0"]["initialConfig"];
    content: any;
};

export default function MyEditor(props: LexicalEditorProps) {
    const [ editor ] = useLexicalComposerContext();
    const editorStateRef = useRef();
    const [saveContent, setSaveContent] = useState('');
    const editorConfig: any = {
        // The editor theme
        theme: EditorTheme,
        // Handling of errors during update
        onError(error: any) {
            throw error;
        },
        editorState: props.content,
        // Any custom nodes go here
        nodes: [
            HeadingNode,
            ListNode,
            ListItemNode,
            QuoteNode,
            CodeNode,
            CodeHighlightNode,
            TableNode,
            TableCellNode, …

我正在尝试构建类似于Google文档的内容,您可以直接编辑页面,而不是通过textarea或iframe编辑页面.这可以使用contentEditable HTML5属性.

那么我是否可以在contentEditable之上使用任何优秀的编辑器,以提供文本格式化,插入链接,从单词粘贴等功能？

http://www.aloha-editor.org/是我发现的那个,但我想知道是否还有更多.

(编辑:我应该澄清一点,我不是要构建整个 Google Docs,我只是将其用作编辑实际内容的示例)

我正在使用在线富文本编辑器,类似于WordPress页面创建者或Stack Overflow后创建者.有人指出,有两种不同类型的在线富文本编辑器:

1. WYSIWYG编辑,和
2. HTML编辑器

我正在构建第二种类型.不幸的是,<textarea>也没有使用contenteditable是HTML富文本编辑非常方便.

这个问题<textarea>(如在这里堆栈溢出使用)是你不能显示文本级语义在编辑栏.您不能只突出显示一个单词并使其变为粗体,您必须插入某种标记(例如*****bold*****).不是非常用户友好,也不是真正的"丰富"文本.

另一方面,使用contenteditable解决了这些问题但引入了控制问题.浏览器将插入各种HTML和CSS以使编辑字段看起来很好.如果你点击Enter,浏览器将插入<p>,或<div>,或<br>,或<div><br></div>...取决于浏览器.如果您粘贴从HTML复制的几个段落,您会得到大量过多的标记 - 甚至超过源HTML中的标记.例如,以下源代码:

<p>This is one paragraph!</p>
<p>This is another.</p>

在网站上显示为:

This is one paragraph!

This is another.

...如果你复制并粘贴到contenteditable表格中,可以给你这样的东西:

<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is another.</p>

...带来内联样式,在某些情况下还有其他HTML.

我一直试图弄清楚 …

我想在 Flutter 中为移动设备创建一个富文本编辑器。什么是最好的方法。我可以使用哪些小部件和覆盖。

我已经探索过像 zefyr、flutter_markdown 这样的包，但它们没有提供我的用例所需的定制级别。