html+css+js开发文本编辑器,有各种排版功能!

当点击上面的按钮,例如添加图片,就会直接向textarea文本框添加一段预设的图片标签。如果添加超链接,就会向文本框添加超链接标签,我们只需要把超链接和链接文字填上去即可。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style type="text/css">
            .a{background: url(images/a.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .p{background: url(images/p.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .left{background: url(images/left.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .center{background: url(images/center.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .right{background: url(images/right.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .b{background: url(images/b.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .images{background: url(images/images.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .video{background: url(images/video.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .font14{background: url(images/14.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .font15{background: url(images/15.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .font16{background: url(images/16.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .red{background: url(images/red.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .blue{background: url(images/blue.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
            .br{background: url(images/br.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

            .a:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .p:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .left:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .center:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .right:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .b:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .images:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .video:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .font14:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .font15:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .font16:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .red:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .blue:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
            .br:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

            #txt{outline: none;resize:none;border:1px solid #c2c2c2;}
        </style>
    </head>
    <body>
        <form action="do.php" method="post">
        <input type="button" onclick="a()" title="添加超链接" class="a">
        <input type="button" onclick="p()" title="添加段落" class="p">
        <input type="button" onclick="font14()"  title="添加14号字体" class="font14">
        <input type="button" onclick="font15()"  title="添加15号字体" class="font15">
        <input type="button" onclick="font16()"  title="添加16号字体" class="font16">
        <input type="button" onclick="left()"  title="左对齐" class="left">
        <input type="button" onclick="center()"  title="居中对齐" class="center">
        <input type="button" onclick="right()"  title="右对齐" class="left">
        <input type="button" onclick="b()"  title="加粗" class="b">
        <input type="button" onclick="red()"  title="红色字体" class="red">
        <input type="button" onclick="blue()"  title="蓝色字体" class="blue">
        <input type="button" onclick="image()"  title="图片" class="images">
        <input type="button" onclick="video()"  title="视频" class="video">
        <input type="button" onclick="br()"  title="换行" class="br">
        <br/><br/>
        <textarea id="txt" cols="80" rows="10" name="text"></textarea><br/><br/>
        <input type="submit">
        </form>
    </body>
    <script>
        var txt = document.getElementById("txt");
        txt.value = "";
        function a(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<a href=‘‘ style=‘color:#607FA6;‘></a>"+str2;
            var newIndex = pointIndex+34;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function p(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<p></p>"+str2;
            var newIndex = pointIndex+3;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function font14(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<font style=‘font-size:14px;‘></font>"+str2;
            var newIndex = pointIndex+30;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function font15(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<font style=‘font-size:15px;‘></font>"+str2;
            var newIndex = pointIndex+30;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function font16(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<font style=‘font-size:16px;‘></font>"+str2;
            var newIndex = pointIndex+30;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function left(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<p style=‘text-align:left;‘></p>"+str2;
            var newIndex = pointIndex+28;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function center(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<p style=‘text-align:center;‘></p>"+str2;
            var newIndex = pointIndex+30;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function right(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<p style=‘text-align:right;‘></p>"+str2;
            var newIndex = pointIndex+29;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function b(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<p style=‘font-weight:bold;‘></p>"+str2;
            var newIndex = pointIndex+29;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function red(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<font style=‘color:#f00;‘></font>"+str2;
            var newIndex = pointIndex+26;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function blue(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<font style=‘color:#39f;‘></font>"+str2;
            var newIndex = pointIndex+26;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function image(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<img src=‘‘>"+str2;
            var newIndex = pointIndex+10;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function video(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<video src=‘‘></video>"+str2;
            var newIndex = pointIndex+12;
            txt.setSelectionRange(newIndex,newIndex);
        };
        function br(value){
            var temp = txt.value;
            txt.focus();
            var pointIndex = txt.selectionStart;
            var str1 = temp.substr(0,pointIndex);
            var str2 = temp.substr(pointIndex,temp.length);
            txt.value = str1+"<br/>"+str2;
            var newIndex = pointIndex+5;
            txt.setSelectionRange(newIndex,newIndex);
        }
    </script>
</html>

项目源码+资源:点击下载

原文地址:https://www.cnblogs.com/homehtml/p/12219249.html

时间: 2025-01-13 18:32:06

html+css+js开发文本编辑器,有各种排版功能!的相关文章

使用Qt开发文本编辑器(一):功能介绍

以前一直很羡慕别人能开发文本编辑器,后来学了Qt,看了里面的例子,自己改造一下,竟也可以弄一个出来,虽然说不是很强大,权当是自己的一个学习成果吧.好了,我就废话少说,直接转入正题了.这个文本编辑器主要实现了以下功能: (1)文本编辑(包括撤销.恢复.保存.打开文件.导出成pdf.另存为等等). (2)Tab页式文档. (3)行号显示. (4)编辑内容转换为大写或小写. (5)字体改变. (6)编辑器设置. (7)转到指定行. 下面是截图: 源代码的下载地址:http://down.51cto.c

Django 程序中添加js插件文本编辑器

第一步:在首页中添加写博客的按钮     <li>         <a href="{% url 'create_article' %}">写博客</a>     </li> 第二步:写相应的创建博客视图,编辑views.py文件 def create_article(request):     if request.method == "GET" :         return  render(request,'

vue中div模拟文本编辑器并且实现v-model功能

说明一下实现div模拟文本编辑器实现v-model数据的双向绑定而不用input的原因 因为div使用v-html绑定的数据中是可以嵌套标签的列入使用v-html进行数据的绑定自定义的标签并不会被过滤掉. v-model 是 Vue 框架提供的众多指令中的一个,其主要作用是可以实现在表单 <input>.<textarea> 及 <select> 标签元素上创建双向数据绑定.但是当我们但是当我们使用div添加contenteditable="true"

node.js富文本编辑器

摘要: 最近在搭建自己的博客,这一段时间可能没有时间来写博客了,但是有了好东西还是要分享给大家.博客网站必然要有编辑文章的编辑器,所以在网上查了些资料.大部分编辑器的后台是基于java.php.asp等,很少有基于node.js的.本来是想用markdown来写文章,但是样式不好调,所以最终还是选择了百度的ueditor,其官网上并没有基于node.js的代码.但是幸运的是我在github上找到了一个类似的,所以将他分享给大家,如果你打算也用node.js来开发自己的博客时可以参考下. 下载引用

【Qt5开发及实例】16、实现一个简单的文本编辑器(over)

实现一个简单的文本编辑器 其他具体的代码基础看前面:http://blog.csdn.net/cutter_point/article/details/42839071 1.功能 这个程序又添加了文本编辑功能,什么加粗,斜体,下划线,字体设置,字号设置,文字排版,段落对齐功能. 2.代码全展示 头文件 showwidget.h /** * 书本:[Qt5开发及实例] * 功能:实现一个简单的文本编辑器 * 文件:showwidget.h * 时间:2015年1月18日10:03:21 * 作者:

【Qt5开发及实例】14、实现一个简单的文本编辑器3

实现文本编辑器的图片旋转功能 基础界面实现:http://blog.csdn.net/cutter_point/article/details/42839071 首先在原来的基础上添加槽函数: void ShowRotate90(); //旋转90度 void ShowRotate180(); //180度 void ShowRotate270(); //270度 函数连接: //实现图片的选择动作 //旋转90° rotate90Action = new QAction(QIcon(":/ro

富文本编辑器

1. https://github.com/xing/wysihtml5 2. https://github.com/neilj/Squire 3.可以试试这个wangEditor - 轻量级web富文本编辑器 生成表格还是会有一些样式,不过比百度的要少一些.以下是官方介绍: 与国产编辑器 百度ueditor和 kindeditor相比,它轻量.易用.UI设计精致漂亮. 与国外编辑器 bootstrap-wysiwyg和 simditor相比,它文档易读.交流方便,更接地气. 它还会根据使用者的

ASP.MVC 项目中使用 UEditor 文本编辑器

1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ueditorcss = new StyleBundle("~/assets/plugins/ueditor/themes/default/css"); ScriptBundle ueditorjquery = new ScriptBundle("~/assets/plugins/ue

Quill – 可以灵活自定义的开源的富文本编辑器

Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill 旨在通过把自身组织成模块,并提供了强大的 API 来构建额外的模块来解决这个问题.它也并没有规定你用样式来定义编辑器皮肤.Quill 还提供了所有你希望富文本编辑器说用于的功能,包括轻量级封装,众多的格式化选项,以及广泛的跨平台支持. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码