我在SO上找到了以下代码来获取一个可信任div的光标位置,但它总是返回0.
应该检索位置的函数:
new function($) {
$.fn.getCursorPosition = function() {
var pos = 0;
var input = $(this).get(0);
// IE Support
if (document.selection) {
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
pos = sel.text.length - selLen;
}
// Firefox support
else if (input.selectionStart || input.selectionStart == '0')
pos = input.selectionStart;
return pos;
}
} (jQuery);
我用来测试它的代码:
$('div.MESSAGE_OF_DAY').keyup(function() {
alert($(this).getCursorPosition()); // always returns 0???
});
如果重要的话,我正在使用Chrome(8.0.552.215).
我有一个内容可编辑的 div。在此我插入一个<pre>some code</pre>标签。此标签旨在允许用户输入格式化代码，类似于 SO。
我遇到的问题是 FF 正在插入<br>标签来代替 \r\n，这在正常的 Html 中是正确的，但在 pre 我实际上想要 \r\n。
我尝试将委托附加到父 contenteditable。但这不会为嵌套的 dom 元素触发。所以
$('#contenteditablediv').delegate('pre', 'keyup', function() { ... });
不火。我还尝试处理父 div 上的正常 keyup，并用 \r\n 替换 pre 标签中的所有 brs。但这会弄乱插入符号并且很笨重。
有没有首选的方法来做到这一点？
我可能不得不求助于剥离它们的服务器端，但我宁愿不这样做。
非常感谢
这是存储在db中的确切字符串:
@blog_post.content = "<p><img src=\"http://localhost:3000/assets/sa_clubbing_logo.png\" alt=\"Sa_clubbing_logo\"><div><b>An image</b></div><div><b><br></b></div><div><b>Another image</b></div><div><b><img src=\"http://localhost:3000/assets/sa_clubbing_logo.png\" alt=\"Sa_clubbing_logo\"><br></b></div></p>"
如你看到的.它由一些图像和一些粗体文本组成.
好的,所以我在数据库中保存了html.我试图将html附加到像这样的内容可编辑div(我的富文本编辑器).
$(document).ready(function(){
$('#rte').append("<%= @blog_post.content %>");
});
它出现在我的内容可编辑div中,但作为实际文本.我希望它呈现为html,以便图像实际显示.似乎附加的html是这样的:
<p><p><img src="http://localhost:3000/assets/sa_clubbing_logo.png" alt="Sa_clubbing_logo"><div><b>An image</b></div><div><b><br></b></div><div><b>Another image</b></div><div><b><img src="http://localhost:3000/assets/sa_clubbing_logo.png" alt="Sa_clubbing_logo"><br></b></div></p></p>
所以我尝试手动将字符串放入append方法中,我得到了我想要的内容:
$(document).ready(function(){
$('#rte').append("<p><img src=\"http://localhost:3000/assets/sa_clubbing_logo.png\" alt=\"Sa_clubbing_logo\"><div><b>An image</b></div><div><b><br></b></div><div><b>Another image</b></div><div><b><img src=\"http://localhost:3000/assets/sa_clubbing_logo.png\" alt=\"Sa_clubbing_logo\"><br></b></div></p>");
});
这里附加的html是这样的:
<p><img src="http://localhost:3000/assets/sa_clubbing_logo.png" alt="Sa_clubbing_logo"></p><div><b>An image</b></div><div><b><br></b></div><div><b>Another image</b></div><div><b><img src="http://localhost:3000/assets/sa_clubbing_logo.png" alt="Sa_clubbing_logo"><br></b></div><p></p>
这些图像就像我想象的那样出现在我的编辑器中.
当我手动插入字符串时,为什么这样做,但是当我使用时却没有<%= @blog_posts.content %>？
我必须在这里遗漏某种格式问题.
javascript ruby ruby-on-rails contenteditable ruby-on-rails-3
这可能不是一个主要问题，但我在点击后看到一个拼写错误的单词的红色波浪下划线。我能以某种方式让它消失吗？当我输入我的名字（Haideri）时，它看起来有点烦人，这显然不在英语词典中。
我试过了，text-decoration: none但它不起作用。
这是小提琴。
我有一个工作代码,<br>当你在内容可编辑div中输入时插入.(浏览器有各种默认插入<div>或<p>替代)
问题是它在构建有序或无序列表时杀死了按Enter键以添加另一个列表项的默认行为.所以我的问题是,你能检测出文本插入点是否在列表项中,如果是,请禁用处理回车键的javascript？
我想读一下contenteditable元素中的某个文本是否为粗体.在Chrome中document.queryCommandValue("bold")返回"true"/"false"一个字符串,IE返回true/false的布尔,但Firefox返回(empty string)在开发者控制台.
我做了一个小提琴作为例子:http: //jsfiddle.net/nTQd2/
如果您在div中写入som文本,请将其标记,然后点击"Bold",该范围应显示"true"/"false"或true/false.我真的不在乎它是作为字符串还是布尔值,因为我可以在以后转换它.
使用JS,我们如何找到是否可以键入html元素.我正在尝试将".tagName"与"INPUT"或"TEXTAREA"进行比较,但它无法区分常规输入文本/电子邮件元素和单选按钮或提交按钮.
我也试过".isContentEditable",但当元素被"继承"时,我无法区分.
我加了一些content for div in html。我做到了contenteditable="true"。
内容中包含一些关键字，例如[$FIRSTNAME$]。
我想使关键字不可编辑。
请为解决这个问题提供任何帮助吗？
谢谢..
我有一个 contenteditable 元素，它大概应该以相对较小的宽度开始，然后当您将内容放入其中时，它会扩展直到达到最大宽度，剪裁内容。
我希望它像文本框一样“回滚”到开头。我试过将插入符号位置设置为开始，它确实有效，但不会“回滚”。我也尝试将内容设置为空（“”），然后在 1 毫秒后在 setTimeout 的帮助下恢复到原来的状态，尽管这是一个非常肮脏的解决方案:(
我不能为此使用文本框，因为我只希望双击后可以编辑内容。有人可以帮忙吗？
HTML：
<section contenteditable='true'>Edit me!</section>
CSS：
section {
background-color:#ccc;
display:inline;
white-space:nowrap;
max-width:100px;
position:absolute;
overflow:hidden;
padding:10px;
}
我有组件方法更新的可编辑元素,但我也有json导入,我想更新元素我的父方法.我可以更新模型,但可编辑元素不会绑定它.如果我将内容插入组件模板,它将绑定更新的模型,但后来我无法真正编辑它.
这是我的例子:https://jsfiddle.net/kuwf9auc/1/
Vue.component('editable', {
template: '<div contenteditable="true" @input="update"></div>', /* if i insert {{content}} into this div, it wil update, but editing behave weird */
props: ['content'],
mounted: function () {
this.$el.innerText = this.content;
},
methods: {
update: function (event) {
console.log(this.content);
console.log(event.target.innerText);
this.$emit('update', event.target.innerText);
}
}
})
var app = new Vue({
el: '#myapp',
data: {
herobanner: {
headline: 'I can be edited by typing, but not updated with JSON upload.'
}
},
methods: {
uploadJSON: function (event) …