有几个(非常好的)富文本Web编辑器用Javascript编写(例如FCKeditor,YUI Texteditor和许多其他人).
但是我找不到任何关于如何构建这样一个组件的教程.可以解释高级别考虑因素(架构)和/或低级"关键"点中的更多细节(即为什么大多数编辑器都使用iFrame,如何处理键盘输入,如Ctrl-B,Ctrl -C选择文本时以及不选择文本时等)
我的主要动机是好奇心; 如果我今天必须开发这样一个编辑器,我不知道从哪里开始.
有没有人知道任何涵盖上述问题的教程(理想情况下,解释如何从头开始构建一个wysiwyg编辑器)？
我有以下非常简单的html页面:
<html>
<head>
<script type="text/javascript">
function alertSelection()
{
var selection = window.getSelection();
var txt = selection.toString();
alert(txt);
}
</script>
</head>
<body>
This is <span style="background-color:black;color:white">the</span> text.
<div style="background-color:green;width:30px;height:30px;margin:30px"
onmouseover="alertSelection()">
</body>
</html>
当我选择整个第一行并将鼠标悬停在方格上时,我会收到"这是文本"的警报.
我如何解决此问题,以便不会从警报消息中删除span标记或任何其他选定的HTML？
编辑:我正在寻找如何从中获取完整的HTML window.getSelection().警报对话框就是我试图验证代码的方式.我只关心在Safari中工作.
我要求我的网络应用程序允许用户"仅打印选择".换句话说,用户选择文本和可能的图像,然后单击此选项.我已经看到了使用Javascript获取所选文本的示例,但是没有找到获取所选html本身的解决方案.
举个例子,如果我有这样的文件:
<html>
<head>
</head>
<body>
<p>A bunch of text</p>
<img src="someimage.jpg" />
<p>Even more text</p>
</body>
</html>
如果用户突出显示图像和第二段,我希望javascript返回:
<img src="someimage.jpg" />
<p>Even more text</p>
这是可能的,如何去做呢？
编辑:我最终选择了一个名为Rangy的js库.
我有一个页面上有博客文章.人们可以选择本文的一部分,我想存储他们选择的部分,但不仅仅是屏幕上的文本,HTML源.
例如,屏幕显示;
Boerboel育种者协会于1983年在Senekal区成立.
完整代码是:
<p>
The Boerboel Breeders Association was <strong>established in 1983</strong> in the Senekal district.
</p>
所以我希望当有人选择"1983年在Senekal区成立"时,它会返回给我的源代码如下:
was <strong>established in 1983</strong> in the Senekal district
我正在使用Javascript和jQuery.
我想用来在我的contentEditable (自己的富文本编辑器)中execCommand('formatblock')选择带有<p>标签或<span>具有特定类或ID或任何CSS样式的行<div>.
document.execCommand('formatblock', false, 'p'>;
如何在此代码中添加类或ID或CSS？
更新:显然,我遇到的问题只会影响选择中的第一个元素.
JSFiddle:http://jsfiddle.net/NhQCR/
我的代码从网页上进行选择:
if (!window.TB) {
TB = {};
}
TB.Selector = {};
// http://stackoverflow.com/questions/5643635/how-to-get-selected-html-text-with-javascript
// and
// http://stackoverflow.com/questions/7690319/javascript-how-do-i-expand-a-user-selection-based-on-html-tags
TB.Selector.getSelected = function() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
var startEl = sel.anchorNode;
if (startEl != range.commonAncestorContainer) {
while (startEl.parentNode != range.commonAncestorContainer) {
startEl = startEl.parentNode;
}
}
var endEl = sel.focusNode;
if (endEl != range.commonAncestorContainer) {
while (endEl.parentNode != range.commonAncestorContainer) { …function selected() {
var selObj = window.getSelection();
}
此函数返回网页中的选定文本.如何返回所选区域的html.这可能与标签<img>和<a>标签有关吗？
以下是功能列表:https://developer.mozilla.org/Special :
Tags？tag = DOM&languageUen
在我的带有codemirror的文本区域中,我试图能够选择/突出显示文本,然后能够单击我的粗体按钮,并应在其周围包裹粗体标签.
我看过了
但似乎不适用于代码镜像.
我的问题是:使用codemirror我如何获取所选文本,然后确保当我单击粗体按钮时它正确包装文本？
脚本
var editor = document.getElementById('text-editor');
var string = grabed_text();
$("#text-editor").each(function (i) {
editor = CodeMirror.fromTextArea(this, {
lineNumbers: true,
mode: 'html'
});
$('button').click(function(){
var val = $(this).data('val');
switch(val){
case 'bold': editor.replaceSelection('<b>' + string + '</b>');
break;
}
});
});
function grabed_text() {
}
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default" onLoad="text_editor();">
<div class="panel-heading">
<button type="button" data-val="bold" class="btn btn-default">Bold</button>
</div>
<div class="panel-body"> …我试图取消选择HTML编辑器中的选定内容。
我已经使用selection.empty()了取消选择内容的功能，它在IE10之前可以正常工作，但在IE11中却无法正常工作。另外该create功能在IE11中不起作用
是否有其他替代功能？
javascript ×9
jquery ×5
dom ×3
html ×3
execcommand ×2
codemirror ×1
range ×1
richtext ×1
rte ×1
safari ×1
webkit ×1
wysiwyg ×1