插入标签（WYSIWYG JavaScript编辑器） [英] Inserting tags (WYSIWYG JavaScript editor)

问题描述

我目前正在为客户编写WYSIWYG编辑器（它不像任何其他编辑器，它也可以使用HTML5插入图纸）我一直在寻找并使用多种方式插入内容。

I'm currently working on a WYSIWYG editor for a client (It's not like any other editor, it will also be able to insert drawings using HTML5) And I've been looking at and using several ways to insert content.

好的，所以我有一个div，其contentEditable设置为true，并且我坚持通过在之前插入标签使文本成为不同的大小/字体在游标之后，或类似的东西。我尝试过使用带有execcommand的设计模式，但是没有用。有人可以帮忙吗？

Ok, so I have a div with contentEditable set to "true", and I'm stuck on a way make the text a different size/font by inserting tags before and after to cursor, or something similar. I've tried using Design Mode with execcommand, but that didn't work. Can somebody help?

推荐答案

你有一些阅读要做。如果您正在接受这一点，请注意在JavaScript中编写WYSIWYG编辑器是一项棘手且耗时的任务：浏览器之间存在许多错误，怪癖和差异，以及您在这里提出这样一个普遍问题的事实在这个阶段的Stack Overflow上并不是好兆头。大多数浏览器制造商都很容易找到关于 designMode 和 contenteditable 实现的文档（参见 MDC ，例如），所以你可以从那里开始。要在光标处插入元素，还需要学习如何处理选择， DOM Level 2 Ranges 和 TextRanges 最后，查看一些流行编辑器（如TinyMCE和CKEditor）的源代码可能有所帮助;更简单，更小的编辑器（周围的负载）可能会更有帮助。

You have some reading to do. If you're taking this on, be aware that it's a tricky and time-consuming task to write a WYSIWYG editor in JavaScript: there are many bugs, quirks and discrepancies between browsers and the fact that you're here asking such a general question on Stack Overflow at this stage doesn't bode well. Most of the browser makers have easily-found documentation on their implementations of designMode and contenteditable (see MDC, for example), so you could start there. To do things like inserting an element at the cursor, you'll also need to learn how to deal with Selections, DOM Level 2 Ranges and TextRanges in IE up to version 8. Finally, looking at the source code of some the popular editors such as TinyMCE and CKEditor may help; simpler, smaller editors (there's loads around) might be even more helpful.

这篇关于插入标签（WYSIWYG JavaScript编辑器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！