网页编辑器实现原型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>富文本编辑器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
function setpic(){

    alert(‘xxx‘);
    $("#editableText").append(‘<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />‘);
}
$(function(){
    $("#setpic").on(‘click‘,function(){
        setpic();
    });
});

</script>
</head>
<body>
    <fieldset>
        <legend>编辑区</legend>
        <div>
            <form>
                字体颜色:
                <select onchange="setFontColor(this)">
                    <option value="black">Black    </option>
                    <option value="red">Red   </option>
                    <option value="green">Green    </option>
                    <option value="blue">Blue    </option>
                </select>
                字体样式:
                <select onchange="setFontStyle(this)">
                    <option value="bold">Bold    </option>
                    <option value="italic">Italic   </option>
                    <option value="underline">Underline    </option>
                    <option value="striketthrough">StriketThrough    </option>
                </select>
                字体名称:
                <select onchange="setFontFamily(this)">
                    <option value="serif">Serif    </option>
                    <option value="sans-serif">Sans-serif   </option>
                    <option value="monospace">Monospace    </option>
                    <option value="comic sans ms">Comic Sans    </option>
                </select>

            </form>
            <button id=‘setpic‘>设置图片</button>
        </div>
        <br/>
        <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div>
    </fieldset>
    <script type="text/javascript">
        function setFontColor(obj)
        {
            document.execCommand("forecolor",false,obj.value);
        }
        function setFontStyle(obj)
        {
            document.execCommand(obj.value,false,null);
        }
        function setFontFamily(obj)
        {
            document.execCommand("fontname",false,obj.value);
        }
    </script>
</body>
</html>

</body>

</html>

网页编辑器原来是专业实现的,

contenteditable="true"
时间: 05-25

网页编辑器实现原型的相关文章

Ueditor百度网页编辑器开发者版java utf-8的使用

index.jsp主要代码: <html> <head> <title>网页编辑器</title> <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script> <script type="text/javascript" char

【HTML5+MVC4】XhEditor网页编辑器图片上传

1.定义模板RichText.cshtml 文件路径:Views/Shared/EditorTemplates/ <textarea id="@ViewData.ModelMetadata.PropertyName" name="@ViewData.ModelMetadata.PropertyName" rows="30" cols="80" style="width: 96%">@Model&

rails使用Kindeditor网页编辑器

在gemfile中加入(后面版本别丢) gem 'rails_kindeditor', '~> 0.5.0' $ bundle 创建配置文件,并且引入js rails g rails_kindeditor:install rails kindeditor:assets js获取编辑器的内容 rails页面中加入以下表单 <%= form_for @article do |f| %> <%= f.kindeditor :content, :editor_id => 'my_ed

【Javaweb】关闭Eclipse/Myeclipse的网页预览与设置xml文件的默认编辑器

在一些Eclipse与Myeclipse for JavaEE的版本中,每次双击JSP文件都会打开半个网页浏览器,半个网页代码编辑器, 而且写代码的时候总是会非常不爽,自动刷新网页编辑器. 这个导致写代码的光标总是会自动跳, 总是要右键一个JSP文件才选择JSP Editor才能打开纯代码的编辑器. 其实你可以设置Eclipse与Myeclipse的JSP的默认打开方式,选择Window->Prefences,然后再搜索框输入file,选择File Association,选择JSP文件,下于下

用java编网页的学习流程,我的一些小心得(初学java到高深运用)

(1)java基础:首先得会写int,String,for循环,数组,**等等(熟练各种基础的关键字,各种java自带的排序,随即等等算法)什么是封装,继承,多态,然后private,public,protected 是什么区别,什么是静态,什么是重载,什么是重写,然后最重要的是明白什么是对象,并且熟练运用接口.(这是给刚刚接触java的人写的,所以写的详细一点). (2)然后就是搭建小型网站:jsp+servlet+jdbc+mysql+tomcat(jsp是java自带的网页样式,需要把网页

经常使用的网页开发工具有哪些

制作网页的基本软件离不开HTML,可是假设真的要用其完毕所有的网络课程开发是不现实的,由于既不方便效率又低,经常使用的方法是选择一种工具软件,仅仅是在必要的时候对工具软件生成的HTML文件进行编辑,这样能够使开发工作变得简单又轻松. 但网页制作工具仅仅是对当中各种类型的媒体进行了集成,媒体的编辑还须要各种类型的媒体工具软件. 一. Microsoft公司的FrontPage 应用开发工具可大大提高编制网络课件的效率. 眼下,国际上比較流行的Web页制作软件大致能够分为两类:代码型和所见即所得型.

在线文本编辑器cheditor应用实例

CKEditor 即 FCKEDITOR . FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持多种编程语言.开源等特点.它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor. FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器.它志于轻量化,不需要太复杂的安装步骤即可使用.它可和PHP.JavaScript.ASP.ASP.NET.ColdFus

最常用的6种原型文件格式对比

做互联网产品经理的小伙伴一定不会对"原型"这个词感到陌生.它就像"用户体验"一样经常被各类人挂在嘴边.原型是一种让用户提前体验产品.交流设计构想.展示复杂系统的方式.就本质而言,原型是一种沟通工具.在这里为大家介绍最常用的6种原型图文件格式以及各自的优缺点. 做互联网产品的小伙伴一定不会对"原型"这个词感到陌生.它就像"用户体验"一样经常被各类人挂在嘴边.原型是一种让用户提前体验产品.交流设计构想.展示复杂系统的方式.就本质而

网页设计基础

一.网站的概述 1.  网页与网站 浏览网页时在浏览器中看到的一个个页面就是网页,而多个相关的网页的集合就构成了一个网站. 举例:(搜狐网)(百度网)(优酷网)等等. 2.  浏览网页的工具-浏览器 浏览器:用于打开显示网页的软件.最常见的是Windows系统自带的IE浏览器. 还有火狐Firefox.360安全浏览器.遨游.腾讯TT等等. 1)  网址:用于定位某个网站某个页面的一串字符,通常是这种格式 2)  主页:访问网站时,默认打开的第一个页面就是主页也叫首页. 3.  认识网页的组成元