1、每天学习一点点之 contenteditable 属性

最新推荐文章于 2024-01-26 16:02:48 发布
最新推荐文章于 2024-01-26 16:02:48 发布
阅读量829 收藏
点赞数
分类专栏： h5 文章标签： javascript html css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beth__hui/article/details/109025382
版权

起初 遇见一个 需求 是 要求 再输入框可以输入文本， 点击检测，调用接口，将特定的文字可以 加颜色 或者 下划线展示， 然后可以继续输入。 正常是用textarea， 但是textarea 不可以 v-html， 里面只能是文本， 不能包含标签。

所以发现该 属性-----contenteditable

<div contenteditable="true">这是一个可编辑段落。</div>

这样就可以实现 div 可以编辑， 如同textarea。 并且可以包含标签，进行样式修改 展示。

可用来实现富文本
一个简单但完整的富文本编辑器

<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
<script type="text/javascript">
var oDoc, sDefTxt;

function initDoc() {
   
  oDoc = document.getElementById("textBox");
  sDefTxt = oDoc.innerHTML;
  if (document.compForm.switchMode.checked) {
    setDocMode(true); }
}

function formatDoc(sCmd, sValue) {
   
  if (validateMode()) {
    document.execCommand(sCmd, false, sValue); oDoc.focus(); }
}

function validateMode() {
   
  if (!document.compForm.switchMode.checked) {
    return true ; }
  alert("Uncheck \"Show HTML\".");
  oDoc.focus();
  return false;
}

function setDocMode(bToSource) {
   
  var oContent;
  if (bToSource) {
   
    oContent = document.createTextNode(oDoc.innerHTML);
    oDoc.innerHTML = "";
    var oPre = document.createElement("pre");
    oDoc.contentEditable = false;
    oPre.id = "sourceText";
    oPre.contentEditable = true;
    oPre.appendChild(oContent);
    oDoc.appendChild(oPre);
    document.execCommand("defaultParagraphSeparator", false, "div");
  } else {
   
    if (document.all) {
   
      oDoc.innerHTML = oDoc.innerText;
    } else {
   
      oContent = document.createRange();
      oContent.selectNodeContents(oDoc.firstChild);
      oDoc.innerHTML = oContent.toString();
    }
    oDoc.contentEditable = true;
  }
  oDoc.focus();
}

function printDoc() {
   
  <
最低0.47元/天 解锁文章
Janicelily
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
匹配 textarea 中多个空格及换行，在v-html 中输出
Qlily_ing的博客
05-14 888
filterText () { let value = this.value; if (value) { value = value.replace(/[\n]/gi, "<br/>"); value = value.replace(/[\s]/gi, "&nbsp;"); return value; ..
可编辑标签添加 contenteditable=“true“属性即可
Min_Fox的博客
02-16 777
想让你的标签变成可编辑的,直接给标签上面添加该样式即可。 contenteditable="true" 有一个需求：给输入框的最后一行添加颜色。 textarea不支持局部文字改变颜色，也不支持内部嵌套其他标签。 // 在vue中可以直接这样写 <div contenteditable="true" v-html='text'></div> data() { return { text: "考虑到发生纠纷实力肯定还是但是感觉<span style='color: #c0
html之textarea标签、事件冒泡、文本域、回车换行、清除、清空、重置、stopPropagation、querySelector、replace、\n、br、innerHTML
06-01 8423
html之textarea标签、事件冒泡、文本域、回车换行、清除、清空、重置、stopPropagation、querySelector、replace、\n、br、innerHTML
Vue 的 v-model, v-text, v-html 区别
艾斯比
04-18 975
v-model 表示和表单输入域的值绑定, 适用于 input, textarea, select 标签, 即普通文本输入域, 多行文本输入域, 单选按钮, 复选按钮, 下拉选择. 有双向绑定的效果 v-text 表示 dom 节点内的普通文本, 与双大括号 {{message}} 等效, 只是单向绑定, 即修改变量值会影响页面展示, 但是页面展示内容改变, 不会影响 data 变量的值. 不会有 xss 风险 v-html 表示 dom 节点内的 html 文本, 与 v-text 类似, 不过会将里面.
Vue教程02：v-model、v-text、v-html
Lee Chen的博客
12-04 782
v-model指令 代码参考/lesson2/01. v-model指令.html v-model指令的作用是双向绑定数据，它只能用于输入组件，如input、textarea、select、radio等。 需要注意的是，通过v-model绑定的数据都为字符串。 实现一个简单的双向绑定。 JavaScript： let vm = new Vue({ el: '#app', // 根元素或挂载...
编辑器中designMode和contentEditable的属性的介绍
10-30
例如，将一个`<div>`的`contentEditable`属性设置为`"true"`，那么这个`div`以及其中的所有内容都将变为可编辑： ```html <div id="tt" contentEditable="true"> ``` 若要让整个页面可编辑，可以在`<body>`标签中...
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
09-28
有些Weber可能没有用过contenteditable这个属性，如果想编辑一个DIV里面的内容，这个属性是一个非常不错的选择
angular-contenteditable, "contenteditable" 属性的Angular 模型.zip
09-18
angular-contenteditable, "contenteditable" 属性的Angular 模型 角 contenteditable 一个AngularJS指令，用于将html标记与 contenteditable 属性绑定到模型。安装bower install angular-contenteditable
HTML5中对contenteditable属性的解释与规定
11-17
contenteditable是一个枚举类型的属性，可供选择的值有 空字符串、 true、false 或 inherit（默认）。 当为空字符串时，效果和true一致。 当一个元素的contenteditable状态为ture（contenteditable属性为空字符串，...
vue结合html实时截取textarea文本
07-12
vue结合html实时截取textarea文本，获取鼠标下标，截取自定义文本，不错的demo
【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现
强者惜字如金，弱者废话连篇！
07-26 3460
【代码】div标签实现输入框，利用contenteditable=“true“属性的标签实现评论。
利用contenteditable实现textarea即支持tags标签也支持文本的实现方式
lalaladamowang的博客
06-19 1360
最近接到了一个新的需求，需要做一个textarea的文本框，即支持tags标签的输入，也要支持普通文本的输入
vue中的重点指令 v-text v-html v-for v-model v-on v-bind v-show v-if v-else和v-else-if
kjs--的博客
04-08 1042
vue中的重点指令 什么是指令，指令使用的方式 vue中的常见指令 v-text：内容渲染指令 v-html：内容渲染指令 v-for：列表渲染指令 v-model：双向绑定指令 v-on：事件绑定指令 v-bind：属性绑定指令 v-show：条件渲染指令 v-if：条件渲染指令 vue中的常见指令: v-text 介绍： v-text是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容 作用： 设置或更新元素的内容 语法： <标签 指令='值'></标签>，如&
用a-textarea+v-html写出一个类似富文本可监控回车的输入框
最新发布
sccscswwe的博客
01-26 347
【代码】用a-textarea+v-html写出一个类似富文本可监控回车的输入框。
规避使用 vue 的 v-html 指令的方法
热门推荐
JimmyLuo17的博客
08-01 2万+
一、引言前一阵子在写业务的时候，发现公司的代码里，有个场景是这样的：需要用户定义一些活动规则，然后在左边的手机预览图中，实时显示出这些活动规则。于是，同事用了一个带 v-html 指令的 <textarea> 标签，并且将双向数据绑定之后的变量 str 直接用 v-html="str" 将 str 绑定在 DOM 上，然后用户输入的规则显示在左边的预览图中。二、思考但我们在学 vue 的教程的时候，
input 输入框的基础用法
weixin_45677987的博客
03-04 1254
1：基础用法： <el-input v-model="input" placeholder="请输入内容"></el-input> 2: 禁用用法： <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input> 3：可清空用法： （使用clearable属性即可得到一个可清空的输入框） 使用 clearable 属性 <el-input pl...
Vue入门-2--------带有 v- 前缀的特殊属性
我爱吃红薯的博客
12-01 863
1，v-model v-model双向绑定：即页面上值的改变会影响数据，后数据改变也会影响页面值。v-model指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 <div id="app"> <h1>{{name2}}，学习好。</h1&gt...
contentEditable属性
小王的技术库
07-31 9278
我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEditable属性。
contenteditable属性如何使用
06-01
`contenteditable`属性可以让一个元素（比如`div`、`p`、`span`等）变成可编辑的，用户可以在其中输入文字、删除文字等。可以通过以下方式来使用`contenteditable`属性： ```html <div contenteditable="true"> 这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值