JavaScript示例八(富文本编辑框)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>富文本编辑,采用iframe嵌入的方法</title>
 </head>
 <body>
  <iframe name="richedit" style="height:200px;width:300px;"src="blank.html"></iframe>
  <br/>
  <button onclick="bold()">加黑</button>
  <button onclick="italic()">斜体</button>
  <script>
	window.onload=function(){
		frames["richedit"].document.designMode="on";
	}

	function bold(){
		frames["richedit"].document.execCommand("bold",false,null);
	}

	function italic(){
		frames["richedit"].document.execCommand("italic",false,null);
	}
  </script>
 </body>
</html>

另外一个空白frame是一个简单的空白blank.html,放在同一目录下即可

<!doctype html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>
时间: 2024-10-07 05:25:47

JavaScript示例八(富文本编辑框)的相关文章

UEditor富文本编辑框学习

1.首先需要引入CSS.JS 1 <!--富文本编辑框--> 2 <link href="${pageContext.request.contextPath}/css/plugins/umEditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"> 3 <link href="${pageContext.request.c

asp.net mvc4 razor视图 (之) 添加 所见即所得 富文本编辑框

原文地址:http://www.dotnetfunda.com/articles/show/2657/implementing-richtexteditor-or-wysiwyg-tinymce-in-aspnet-mvc 总结下: 通过"管理Nuget程序包"功能添加tinymce到专案. 然后对于需要变成wysiwyg的输入框添加属性,AllowHtml和UIHint即可,如下: [AllowHtml] [UIHint("tinymce_full_compressed&q

最近三日解决的富文本编辑框到处docx文件问题

最近三日都在解决这个问题,现在想来,一路跌跌撞撞才解决,期间试了很多种方式,最后才解决. 首先,没有代码,不确定需要解决什么,这样浪费了很多时间,以后出现这种情况,直接找到业务项目的代码,搞过来,看看代码再开始搞,在人家的基础上再搞,节省很多时间. 后续,一直是查资料,其实,是给那个人解决了两个问题,一个是到处打开出现的问题,一个才是到处图片. 从中也感觉到了一个公司的一个产品的复杂性了,几百兆的代码,怪不得这个公司每年销售额有1亿多,这产品积累的太多了. 解决问题很繁琐,首先我也是无从下手,慢

深入理解javascript中的富文本编辑

前面的话 一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档.实际上差不多就是这样.富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所得),指在网页中编辑富文本内容.本文将详细介绍如何通过javascript实现富文本编辑 方式 有两种编辑富文本的方式,一种是使用iframe元素,另一种是使用contenteditable属性 [1]iframe 在页面中嵌入一个包含空HTML页面的iframe.通过设置designMode属性,

javascript中的富文本编辑

一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档.实际上差不多就是这样.富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所得),指在网页中编辑富文本内容.本文将详细介绍如何通过javascript实现富文本编辑 方式 有两种编辑富文本的方式,一种是使用iframe元素,另一种是使用contenteditable属性 [1]iframe 在页面中嵌入一个包含空HTML页面的iframe.通过设置designMode属性,这个空白的

请教下关于CKEditor富文本编辑框设置字体颜色的问题

CKEDITOR.editorConfig = function( config ){ config.plugins = 'about,a11yhelp,basicstyles,bidi,blockquote,clipboard,colorbutton,colordialog,contextmenu,dialogadvtab,div,elementspath,enterkey,entities,filebrowser,find,flash,floatingspace,font,format,fo

微信小程序使用wxParse实现接入富文本编辑

简介 微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现. 但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不一致,那么怎么样才能做到富文本能够在小程序页面中显示呢? 解决办法 有位大牛开发了一个模板叫作wxParse,可以直接引入小程序使用.下面把大牛的github地址贴上来: https://github.com/icindy/wxParse 想要了解更多的同学可以直接去他的github下查看说明文档.

angular延时函数和数据加载完才显示主要的页面、上传文件到后端、富文本框编辑框(ckeditor)

延时函数 setTimeout(()=>{ console.log("延时打印") },10000); // 延时10秒打印 //简单等数据加载完才显示主要的页面 1.先下载ngx-loading模块 npm install --save ngx-loading 2.在app.module.ts中引入NgxLoadingModule模块 import {NgxLoadingModule} from 'ngx-loading'; imports: [ BrowserModule,

《JAVASCRIPT高级程序设计》选择框脚本和富文本编辑

一.选择框脚本 选择框也是表单的一个字段,是通过<select>和<option>元素来创建的,需要使用javascript来控制.选择框拥有以下的属性和方法: 以下介绍一些选择框的常用方法: 1.获取选择项 var selectbox = document.forms[0].elements["selectID"]; // 选择第0项的值和文本 var text = selectbox.options[0].text; var value = selectbo