有几个(非常好的)富文本Web编辑器用Javascript编写(例如FCKeditor,YUI Texteditor和许多其他人).
但是我找不到任何关于如何构建这样一个组件的教程.可以解释高级别考虑因素(架构)和/或低级"关键"点中的更多细节(即为什么大多数编辑器都使用iFrame,如何处理键盘输入,如Ctrl-B,Ctrl -C选择文本时以及不选择文本时等)
我的主要动机是好奇心; 如果我今天必须开发这样一个编辑器,我不知道从哪里开始.
有没有人知道任何涵盖上述问题的教程(理想情况下,解释如何从头开始构建一个wysiwyg编辑器)？
我正在尝试权衡使用<div>和<iframe>制作我自己的富文本/所见即所得编辑器的优点和缺点.
在这样做的时候,为什么我不能只使用一个满足 <div>而且为什么这么多人更喜欢<iframe>？
背景讨论:根据我的理解,制作一个所见即所得编辑器的常用方法是使div或iframe 满足,然后对execCommand包含div或iframe主体的文档进行操作,使其文本变为粗体或其他.
这是HTML:
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<div contenteditable="true"></div>
</body>
</html>
VS:
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<iframe>
<body contenteditable="true"></body>
</iframe>
</body>
</html>
和JS:
$(document.body).on('click', '.btn-bold', function(){
document.execCommand('bold', false, null);
});
VS:
$(document.body).on('click', '.btn-bold', function(){
window.frames[0].document.body.execCommand('bold', false, null);
});
看起来大多数制作精良的富文本编辑器都使用iframe.虽然我可以很容易地在Webkit浏览器中使用这个contenteditable/execCommandcombo来处理div/iframe,但是我有一个地狱般的时间试图让iframe在Firefox中运行.我不得不求助于将脚本和样式表加载到iframe和各种废话中来复制我可以使用基于div的版本轻松完成的任务.所以<div>基于方法似乎更可取.我重新考虑任何有力的理由？
我正在寻找一个好的WYSIWYG编辑器的市场.我的用户打算写的东西就像我现在在Stack Overflow上做的那样,但是他们不像SO用户那样精通技术,所以我需要一个WYSIWYG编辑器而不是这个Markdown编辑器.
功能方面,我希望编辑器具有与此编辑器具有的按钮大致相同的功能,即粗体/斜体/链接/引号/列表(编号/项目符号)/标题.更多功能当然很有趣.
我希望编辑器不要保存为HTML,而是使用其他格式,如BBCode或Markdown.这是因为我想尽量减少用户将脚本或任何其他恶意注入数据库的可能性.
有许多不同的WYSIWYG编辑器,如FCKeditor,TinyMCE等,但不幸的是大多数都保存在HTML中.
虽然TinyMCE有BBCode模式,但我读到TinyMCE 有点臃肿.我偶然发现Markdown WYSIWYG项目似乎或多或少死了.
你有其他建议吗？
如果编辑器是基于jQuery构建的,这是一个加分.
我的任务是为我们的开发人员设置一个wiki来共享项目信息(服务器IP,接口文档,体系结构图等).我的经理建议Deki,我也听说过MediaWiki和Twiki.这里的一个项目使用Trac但我们不需要它的SVN功能,如果可能的话我们想要一个WYSIWYG编辑器.我们还想在本地托管这个wiki.
我找不到很多比较各种wiki平台的网络资源,之前的堆栈溢出问题还没有直接解决问题.
什么是最好的维基平台？在过去使用过的那些好/可怕的东西？
要求:
如果不重复,非常相似:编码标准维基
更新:
我们决定和Deki一起去.出色的界面,WYSIWYG,用户层次结构以及从VM映像进行安装非常简单.我赞成了Deki的帖子但是我会给wikimatrix答案给出最好的答案,因为这是帮助我比较各种wiki平台的最佳建议.谢谢!
我在 -browser X？HTML编辑器中搜索"suck less"WYSIWYG ,它可以生成良好的 HTML代码.
(不<font>,<foo style="...">,<p></p><span></span><p><span> </span><span><span>blah</span></<span></p>等等- <b>和<i>等是确定).
应该易于使用,因为它将被不知道HTML是什么的人使用.
有什么建议？
复制和粘贴从Word准备就绪的额外点!:-)
(我找到了很多编辑器,但他们都创建了这个<font>和嵌套的<span>垃圾,打破了网站设计,并使一个网站膨胀到100kB.)
我希望在我正在进行的项目中包含CKEditor,我需要CKFinder插件提供的图像上传支持,但是我并不特别需要CKFinder工具的其余部分,因此购买许可证有点过分.有没有人花时间为CKEditor 3实现一个可以与ASP.NET MVC一起使用的自定义图像上传器？如果需要我可以创建我自己的,只是想先在这里查看.
或者,有没有人知道一个体面的WYSIWYG编辑器与支持图像上传的CKEditor/Cute Editor相同,并且可以在ASP.NET MVC中使用？
对于自定义wiki django-wakawaka,我希望能够添加WYSIWYG支持.
TinyMCE显然是最流行的插件,甚至被Wordpress使用.
但CK编辑器似乎更具特色.
那些使用过这些或两者中的任何一个的人,这更好,为什么.是否有一些更好的包裹,我错过了？
当我总结CKeditor更好时,通过它们(因为它没有被广泛使用),是否有一些我缺少的东西.
我想将它与django和jquery一起使用,每页有多个WYSIWYG小部件实例.有人提供优势吗？
我们使用的是Redactor(https://imperavi.com/redactor/)版本10.1.1,由于对项目的依赖性很大,我们没有迁移到Redactor II.
最近我们在Chrome 58版本面临一个非常奇怪的问题.问题是:
- 无法为所选文本格式化粗体,斜体,下划线,sup,sub等
请告诉我们是否有任何解决方法.任何形式的帮助将不胜感激.
根据公认的解决方案更新:
// Provided solution is tested for Redactor version 10.1.1
createMarkers: function()
{
this.selection.get();
var node1 = this.selection.getMarker(1);
this.selection.setMarker(this.range, node1, true);
if (this.range.collapsed === false) {
var node2 = this.selection.getMarker(2);
this.selection.setMarker(this.range, node2, false);
// Fix for Chrome58 Issues
if (this.utils.browser('chrome')) {
this.caret.set(node1, 0, node2, 0);
}
// End Chrome58 Issues
}
this.savedSel = this.$editor.html();
},
我需要从我的Delphi应用程序发送电子邮件.我需要的是一个WYSIWYG编辑器,我可以在应用程序中使用该编辑器以HTML格式创建电子邮件正文.有任何想法吗？谢谢,彼得.
我想把 文字写在TinyMCE里面textarea.我有下面的代码.显示了TinyMCE文本区域,但警报甚至没有显示.为什么？
<html>
<head></head>
<body>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js'></script>
<script type="text/javascript" src="/home/javiergarcia/Scaricati/jari/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
});
$(document).ready(function() {
$('form').submit(function() {
//alert("fasdfs");
alert(tinyMCE.get('#jander').getContent());
});
});
</script>
<form method="post" action="somepage">
<textarea name="content" id="jander" style="width:100%"></textarea>
<input type="submit">
</form>
</body>
</html>
问候
哈维尔
wysiwyg ×10
editor ×3
html ×3
javascript ×3
ckeditor ×2
jquery ×2
tinymce ×2
wiki ×2
angularjs ×1
asp.net-mvc ×1
bbcode ×1
delphi ×1
django ×1
execcommand ×1
markdown ×1
open-source ×1
redactor.js ×1
richtext ×1
rte ×1
text-editor ×1