AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

富文本编辑器开发

2014-09-09 1162
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <p><img src="http://www.geekpedia.com/pics/rtb/RTB.gif" alt=""></p> <p></p><pre code_snippet_id="465884" snippet_file_name="blog_20140909_1_2380162" name="code" class="html"><body onLoad="def 

<body onLoad="def()">
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" /> | 
<input type="button" style="height:21px; width:21px;"value="L" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" title="align right" /> | 
<select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> | 
<input type="button" style="height:21px; width:21px;"value="1" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="●" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="←" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="→" title="Indent" />
</div>
接下来添加iframe： 

<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>


编写js代码： 

<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close();


这里主要是给iframe的body添加样式，下面是命令函数，比如改变字体大小颜色之类都要通过它来实现： 

function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}

添加各种编辑用的按钮和下拉框： 

<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |

<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
   <option value="Arial">Arial</option>
   <option value="Comic Sans MS">Comic Sans MS</option>
   <option value="Courier New">Courier New</option>
   <option value="Monotype Corsiva">Monotype</option>
   <option value="Tahoma">Tahoma</option>
   <option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
   <option value="black">-</option>
   <option style="color:red;" value="red">-</option>
   <option style="color:blue;" value="blue">-</option>
   <option style="color:green;" value="green">-</option>
   <option style="color:pink;" value="pink">-</option>
</select> |

下面是整个完整的代码： 

<html>
<head>
</head>
<body onLoad="def()"><center>
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
   <option value="Arial">Arial</option>
   <option value="Comic Sans MS">Comic Sans MS</option>
   <option value="Courier New">Courier New</option>
   <option value="Monotype Corsiva">Monotype</option>
   <option value="Tahoma">Tahoma</option>
   <option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
   <option value="black">-</option>
   <option style="color:red;" value="red">-</option>
   <option style="color:blue;" value="blue">-</option>
   <option style="color:green;" value="green">-</option>
   <option style="color:pink;" value="pink">-</option>
</select> | 
<input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="●" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="←" onClick="fontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="→" onClick="fontEdit('indent')" title="Indent" />
</div>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>
</center>
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
textEditor.document.close();
function def()
{
   document.getElementById("fonts").selectedIndex=0;
   document.getElementById("size").selectedIndex=1;
   document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
   textEditor.document.execCommand(x,"",y);
   textEditor.focus();
}
-->
</script>
</body>
</html>






文章标签：
前端开发
JavaScript
关键词：
编辑器开发
微个日光日
目录
相关文章
fogin
|
7月前
|
JSON 数据可视化 图形学
Graphix: 轻量级、可插拔、OOP 式图形编辑器开发引擎
A lightweight, pluggable, object-oriented programming (OOP) style graphic editor development engine / 一个轻量级、可插拔、OOP 式图形编辑器开发引擎
fogin
136 2
it999977
|
1月前
|
前端开发
业余时间开发了个海报编辑器
为了满足撰写博客或录制教程视频时对高质量海报的需求，我利用业余时间开发了一款海报编辑器。第一版功能简单，支持固定尺寸、黑底白字的标题。后来经过优化，增加了背景图、模糊效果、文字样式调整等功能，使海报更具吸引力。目前该编辑器已上线，欢迎大家试用并反馈。[访问海报编辑器](https://tool.share888.top/#/poster)
it999977
69 6
业余时间开发了个海报编辑器
toddli
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发：富文本编辑器权限管理与 UEditor 、Wiki接入，实现 Markdown 文本编辑器
Django 后端架构开发：富文本编辑器权限管理与 UEditor 、Wiki接入，实现 Markdown 文本编辑器
toddli
171 0
net936
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
net936
110 0
net936
|
6月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言，以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展，越来越多的在线Markdown编辑器应运而生，为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
net936
130 4
Dylaniou
|
2月前
|
运维 Java Linux
【运维基础知识】掌握VI编辑器：提升你的Java开发效率
本文详细介绍了VI编辑器的常用命令，包括模式切换、文本编辑、搜索替换及退出操作，帮助Java开发者提高在Linux环境下的编码效率。掌握这些命令，将使你在开发过程中更加得心应手。
Dylaniou
39 2
朝阳39
|
5月前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
朝阳39
675 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
net936
|
7月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言，以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展，越来越多的在线Markdown编辑器应运而生，为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
net936
84 1
基于HTML5开发的Markdown在线编辑器
土木林森
|
7月前
|
API 开发工具 C++
【专栏：工具与技巧篇】使用代码编辑器（VS Code/Sublime Text）提升开发效率
【4月更文挑战第30天】在VS Code与Sublime Text两大流行代码编辑器中，开发者可借助其高效特性提升编程效率。VS Code拥有丰富的插件生态、内置Git集成、强大的调试工具、智能提示和多文件导航功能。Sublime Text则以其轻量级、快速响应、多光标编辑及自定义构建系统见长。学习编辑器的键盘快捷键、自定义配置、使用内置终端以及键绑定和宏，将助开发者进一步提高开发效率。选择适合自己的编辑器并不断适应新技术是提升开发工作流的关键。
土木林森
318 1
漏刻有时
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
漏刻有时
994 0

热门文章

最新文章

  • 1
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
  • 2
    Linux-vi编辑器开发必备操作
  • 3
    linux基础--vim编辑器
  • 4
    EC地图编辑器(预览版)
  • 5
    vue使用富文本编辑器wangEditor，且增加附件功能 | 项目复盘
  • 6
    【前端】简单配置使用百度在线文本编辑器UEditor
  • 7
    「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
  • 8
    CSDN博客使用MarkDown编辑器bug解决办法
  • 9
    掌握VI编辑器(二)
  • 10
    VI编辑器常用命令-不可不知
  • 1
    设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
    407
  • 2
    设置VSCode编辑器、终端字体为微软雅黑Microsoft Yahei，字号大小为11像素
    703
  • 3
    设置WebStorm用Ctrl+鼠标滚轮上、下调整编辑器代码字体大小
    67
  • 4
    vi编辑器替换字符串命令
    80
  • 5
    vim编辑器和gcc/g++编辑器的使用讲解
    161
  • 6
    欢迎使用Markdown编辑器
    87
  • 7
    【Shell 命令集合 文本编辑器 】Linux pico 编辑器使用指南
    115
  • 8
    【Shell 命令集合 文本编辑器】Linux joe 编辑器的使用教程
    97
  • 9
    【Shell 命令集合 文本编辑器】Linux jed 编辑器使用指南
    87
  • 10
    【Shell 命令集合 文档编辑】Linux 文本编辑器 ex命令使用指南
    101

    • 相关课程

    更多
  • React 入门教程开发文档
  • 移动Web前端开发
  • jQuery开发教程
  • 前端开发CSS基础
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JS零基础入门教程（上册）
  • WebGL 在前端可视化中的实践
  • 现代Javascript高级教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础1：前端开发环境的安装和配置
  • vi编辑器的学习和使用
  • CSS基础教程
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。