最近由于工作需要，需要手写一个富文本编辑器，需要支持源代码粘贴和可视化下内容修改的基本功能。自己就手撸一个富文本编辑器。
基本原理：由于富文本内容不想收到所在页面或者前端框架的影响，或者说写一个完全单独的纯编辑器，采用原生iframe+js+jquery实现。
这就是dom结构部分，这里面iframe就是我们后面重点实现页面预览的地方。
通过以上代码，我们就能拿到iframe的内容，当然设置内容也是完全可以的。我们对dom的操作基本上就要基于这个对象去实现。
还有一点很重要，就是我们如何过去这个iframe所在的window，下面会用到。
这个就是，我们获取iframe所在dom的实现方法。
这就是一个基本原理，我们将在textarea中输入的html字符串，转化为dom展示在iframe的视图页面上。
以上代码，通过jquery节点的html方法，将textArea的文本内容转化为dom，病展示在html代码中。
这个基本原理就是，让iframe中的元素具有可编辑属性。增加contentEditable属性，则dom元素当前允许编辑。我的实际需求是，只允许编辑文本。所以我只需要将含有的文本内容的元素所在dom节点设置contentEditable属性。
切换会源代码时，我们又需要将contentEditable移除掉。
插入内容和粘贴内容，之前我们需要知道当前可编辑dom中编辑时光标所在的位置，才能知道我们在哪里插入内容，或者粘贴内容。
这里我们就需要用到window.getSelection() 这个方法，当然这里很重要的一点是，我们需要用到iframe所在的window，而不是直接当前页面所在window。这里就用到开头的方法。
注意这里的写法。这里拿到的就是当前iframe所在的方法，然后去获取getSelecttion()，这时我们就能知道光标的位置。方便我们去插入内容和粘贴内容。
我的实际需求是可以编辑和粘贴内容，所以这里就实现了可编辑和粘贴内容。
在可视化视图下，我们要防止超链接点击是跳转，在代码模式下，我们要防止html代码格式不完整的问题，jquery其实可以帮我们完成一些细节操作，完整代码(会给table增加tbody, 会补齐确实的标签等)，但是最好还是要校验一下，防止js代码执行等，这里记不一一讲了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/167970.html