精华内容
下载资源
问答
  • 代码如下: <span xss=removed><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <...charset=utf-8″> <...富文本编辑器</title> </
  • NULL 博文链接:https://guoliangheyuqin.iteye.com/blog/1676688
  • 19款javascript文本编辑器。也许你还有兴趣查看15个基于Web的HTML编辑器和6款所见即所得(WYSIWYG)的在线Web编辑器。
  • 文本编辑器生成的HTML标签,进行转义,然后写入数据库,防止脚本注入: function htmlEncode(value){  return $('<div>').text(value).html(); } 1、从数据库拿出的转义后的HTML标签内容,先得去除转义,然后再...
  • 网页文本编辑

    2011-11-29 08:59:40
    一个简单网页文本编辑器,以实现基础功能,连图片大小不足70k,可以在这个基础上扩展,纯js+css代码。
  • 网页文本输入框带HTML便签输入的工具,排版功能全面,支持源代码、全屏模式以及图片视频声音等多媒体信息插入,而且这个是开源的工具,可以用在公开项目中
  • 小程序富文本编辑

    2019-02-15 14:06:32
    这个是小程序富文本编辑器,可以编辑文字图片混排的效果,网上找的资源,希望能帮到有需要的人
  • 可以如同offer在文字旁边插入图片,并且一样实现了拍照获取图片,已经获取本地图片的功能.
  • 解压密码:RJ4587 网页编辑器现在非常多,网上也有不少封装得很棒的网页...今天我们分享一款非常轻量级的Javascript网页编辑器,外观十分简洁,唯一不足的是,编辑器并非可视化,它只是帮助你快速地插入相应HTML标签。
  • 手机端富文本编辑

    2018-08-28 17:08:23
    可用于手机端内容编辑,可以插入文字,更改文字样式,插入图片,链接等。简单易懂,内附实例demo
  • 写在前面 今天想**“借鉴”**一下网络上文章,摘录(copy)一部分内容,结果竟然弹...打开网页编辑器(ctrl + shift + i) 点击右上方的设置按钮 找到Disable JavaScript,并勾选上 此时再复制文本,复制成功! ...

    写在前面

    今天想借鉴一下网络上文章,摘录(copy)一部分内容,结果竟然弹出收费窗口,这我哪里答应!下面,就把一个生活小妙招交给大家!

    问题解决

    1. 打开网页编辑器(ctrl + shift + i
      在这里插入图片描述
    2. 点击右上方的设置按钮
      在这里插入图片描述
    3. 找到Disable JavaScript,并勾选上
    4. 此时再复制文本,复制成功!
    展开全文
  • 网页中插入文本编辑

    千次阅读 2017-04-08 14:01:27
    网页中插入文本编辑器 http://kindeditor.net/demo.php 效果: 编辑器使用方法: 1. 下载编辑器下载 KindEditor 最新版本,下载之后打开 examples/index.html 就可以看到演示。下载页面: ...

    网页中插入文本编辑器
    http://kindeditor.net/demo.php
    效果:
    这里写图片描述

    编辑器使用方法:
    1. 下载编辑器

    下载 KindEditor 最新版本,下载之后打开 examples/index.html 就可以看到演示。

    下载页面: http://www.kindsoft.net/down.php

    2.部署编辑器

    解压 kindeditor-x.x.x.zip 文件,将所有文件上传到您的网站程序目录里,例如:http://您的域名/editor/

    Note
    您可以根据需求删除以下目录后上传到服务器。

    • asp - ASP程序
    • asp.net - ASP.NET程序
    • php - PHP程序
    • jsp - JSP程序
    • examples - 演示文件

    3.修改HTML页面

    在需要显示编辑器的位置添加textarea输入框。

    <textarea id="editor_id" name="content" style="width:700px;height:300px;">
    &lt;strong&gt;HTML内容&lt;/strong&gt;
    </textarea>
    

    Note

    • id在当前页面必须是唯一的值。
    • 在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
    • 在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。

    在该HTML页面添加以下脚本:

    <script charset="utf-8" src="/editor/kindeditor.js"></script>
    <script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create('#editor_id');
            });
    </script>

    Note

    • 第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。
    • 通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考 编辑器初始化参数 。
    var options = {
            cssPath : '/css/index.css',
            filterMode : true
    };
    var editor = K.create('textarea[name="content"]', options);
    1. 获取HTML数据
    // 取得HTML内容
    html = editor.html();
    
    // 同步数据后可以直接取得textarea的value
    editor.sync();
    html = document.getElementById('editor_id').value; // 原生API
    html = K('#editor_id').val(); // KindEditor Node API
    html = $('#editor_id').val(); // jQuery
    
    // 设置HTML内容
    editor.html('HTML内容');

    Note

    • KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行
    • sync() 将HTML数据设置到原来的textarea,KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。
    • KindEditor默认采用白名单过滤方式,可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode
    // 关闭过滤模式,保留所有标签
    KindEditor.options.filterMode = false;
    
    KindEditor.ready(function(K)) {
            K.create('#editor_id');
    }
    

    其他参考:http://blog.csdn.net/u014695532/article/details/51452841

    展开全文
  • 以前在网上都看到过类似的功能,不过没自己想要实现过,这次刚好做静态页面中有这样的一个需求,就试着自己做做看,做完发现也不是什么很难的事情。
  • 360微信富文本编辑

    2018-09-27 17:38:39
    360微信富文本编辑器,编辑器富文本开发,以百度富文本为基础开发,仅供参考
  • 前端使用wangEditor插件实现富文本编辑器功能,简单方便,容易上手。
  • javascript 双击文字后实现编辑文本功能代码
  • 使用方法:复制并粘贴下面的JS代码,放到您的网页的最末端,如果您的网站使用的模板,您也可以复制代码到您的模板,图片编辑功能将会体现在您每一张图片上。 详见演示文档code.html 珍惜美好 E-mail:cuguang@...
  • 一个强大的 WYSIWYG 富文本网页编辑器,由纯 javascript 编写 演示: KothingEditor 是一个轻量级、灵活、可定制的 WYSIWYG 文本编辑器,适用于您的 Web 应用程序。 从 Microsoft Word 和 Excel 粘贴。 自定义表...
  • 文本编辑js和css

    2013-05-07 10:08:20
    文本编辑器,网页文本编辑器,评论文本编辑
  • 富文本编辑器插件summernote.js是一款基于jQuery+Bootstarp实现的网页文本编辑器特效。
  • textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。 代码如下:<iframe id=”myEditer” width=”100%” ...
  • 几种常用网页文本编辑器总结

    千次阅读 2014-01-17 00:36:29
    文本编辑器应用总结 一. lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js: 组件的核心JS文件 2. lhgeditor.css:组件的样式表文件 3. images:组件所需的图片都在此文件夹中 以上三个...

    文本编辑器应用总结

    一. lhgeditor文本编辑器
    lhgeditor组件文件结构:
    1. lhgeditor.js: 组件的核心JS文件
    2. lhgeditor.css:组件的样式表文件
    3. images:组件所需的图片都在此文件夹中
    以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。
    lhgeditor组件使用说明:
    1. 在调用组件的页面加载lhgcore.js和lhgeditor.js两个文件。
    2. 在window.onload函数里加入J.editor.add(编辑器的id).init();例:

    <script type="text/javascript">
    window.onload = function()
    {
        J.editor.add('elm1').init();
    }
    </script>
    <form action="_postdate.asp" method="post" target="_blank">
    <div>
    <textarea name="elm1" id="elm style="width:600px;height:300px;"> 
    lhgeditor小型在线编辑器</textarea>
    </div>
    <input type="submit" value="Submit" />
    </form>






     

    二. nicEdit文本编辑器

    <script type="text/javascript">

    bkLib.onDomLoaded(function() {

    new nicEditor().panelInstance('area1');

    new nicEditor({fullPanel true}).panelInstance('area2');

    new nicEditor({iconsPath '../nicEditorIcons.gif'}).panelInstance('area3');

    new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',

    ' superscript','html','image']}).panelInstance('area4');

    new nicEditor({maxHeight 100}).panelInstance('area5');

    });

    </script>

    //默认模式

    //new nicEditor().panelInstance('area1');

    <textarea cols="50" id="area1"></textarea>

    几种常用网页文本编辑器总结
    //All Available Buttons

    //new nicEditor({fullPanel true}).panelInstance('area2');

    <textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>

    几种常用网页文本编辑器总结

     

    //new nicEditor({iconsPath '../nicEditorIcons.gif'}).panelInstance('area3');

    <textarea cols="50" id="area3"></textarea>

    几种常用网页文本编辑器总结

    //自定义按钮

    //new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',

    'superscript','html','image']}).panelInstance('area4');

    <textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>

    几种常用网页文本编辑器总结

    //设置文本编辑器的最大高度

    //new nicEditor({maxHeight 100}).panelInstance('area5');

    <textarea style="height: 100px;" cols="50" id="area5">

             HTML <b>content</b>  <i>default</i> in textarea

    </textarea>

    几种常用网页文本编辑器总结

    三. kindeditor文本编辑器

    (1) 支持多种语言phpasp

    (2) 功能强大

    默认模式

    <script charset="utf-8" src="../kindeditor-min.js"></script>

    <script charset="utf-8" src="../lang/zh_CN.js"></script>

    <script>

    var editor;

    KindEditor.ready(function(K) {

    editor K.create('textarea[name="content"]', {

    resizeType 1,

    allowPreviewEmoticons false,

    allowImageUpload false,

    items ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic','underline','removeformat', '|', 'justifyleft','justifycenter',       'justifyright', 'insertorderedlist','insertunorderedlist', '|',  'emoticons', 'image', 'link']

    });

    });

    </script>

    <textarea  name="content"  style="width:700px;height:200px;visibility:hidden;">

         KindEditor

    </textarea>

    几种常用网页文本编辑器总结

    Multi Language Examples(多语言)

    <script charset="utf-8" src="../kindeditor-min.js"></script>

    <script>

    var editor;

    KindEditor.ready(function(K) {

    K('select[name=lang]').change(function() {

    if (editor) {

    editor.remove();

    editor null;

    }

    editor K.create('textarea[name="content"]', {

    langType this.value

    });

    });

    K('select[name=lang]').change();

    });

    </script>

    <form>

    <p>

    <select name="lang">

    <option value="en">English</option>

    <option value="zh_CN">简体中文</option>

    <option value="zh_TW">繁體中文</option>

    <option value="ar">Arabic</option>

    </select>

    </p>

      <textarea name="content" style="width:800px;height:200px;"></textarea>

    </form>

    几种常用网页文本编辑器总结

    粘贴设置:

    <script charset="utf-8" src="../kindeditor-min.js"></script>

    <script charset="utf-8" src="../lang/zh_CN.js"></script>

    <script>

    KindEditor.ready(function(K) {

    K.create('#content1', {

    pasteType 0

    });

    K.create('#content2', {

    pasteType 1

    });

    K.create('#content3', {

    pasteType 2

    });

    });

    </script>

       禁止粘贴

    <textarea  id="content1" name="content" style="width:700px;height:200px;  

    visibility:hidden;">

    </textarea>

    几种常用网页文本编辑器总结

           纯文本粘贴

            <textarea  id="content2" name="content" style="width:700px;height:200px;  

      visibility:hidden;">

    </textarea>

    几种常用网页文本编辑器总结

    HTML粘贴

    <textarea  id="content3" name="content"  style="width:700px;height:200px;  

    visibility:hidden;"></textarea>

    几种常用网页文本编辑器总结

    自定义插件

    <script charset="utf-8" src="../kindeditor-min.js"></script>

    <script charset="utf-8" src="../lang/zh_CN.js"></script>

    <script>

    // 自定义插件 #1

    KindEditor.lang({

    example1 '插入HTML'

    });

    KindEditor.plugin('example1', function(K) {

    var self this, name 'example1';

    self.clickToolbar(name, function() {

    self.insertHtml('<strong>测试内容</strong>');

    });

    });

    // 自定义插件 #2

    KindEditor.lang({

    example2 'CLASS样式'

    });

    KindEditor.plugin('example2', function(K) {

    var self this, name 'example2';

    function click(value) {

    var cmd self.cmd;

    if (value === 'adv_strikethrough') {

    cmd.wrap('<span style="background-color:#e53333;

    text-decoration:line-through;"></span>');

    else {

    cmd.wrap('<span class="' value '"></span>');

    }

    cmd.select();

    self.hideMenu();

    }

    self.clickToolbar(name, function() {

    var menu self.createMenu({

    name name,

    width 150

    });

    menu.addItem({

    title '红底白字',

    click function() {

    click('red');

    }

    });

    menu.addItem({

    title '绿底白字',

    click function() {

    click('green');

    }

    });

    menu.addItem({

    title '黄底白字',

    click function() {

    click('yellow');

    }

    });

    menu.addItem({

    title '自定义删除线',

    click function() {

    click('adv_strikethrough');

    }

    });

    });

    });

    KindEditor.ready(function(K) {

    K.create('#content1', {

    cssPath ['../plugins/code/prettify.css', 'index.css'],

    items ['source', 'removeformat', 'example1', 'example2',  'code']

    });

    });

    </script>

    <textarea id="content1" name="content" style="width:700px;height:200px;  visibility:hidden;"></textarea>

    几种常用网页文本编辑器总结

    单独调用组件

    上传图片弹出框

    <script src="../kindeditor.js"></script>

    <script src="../lang/zh_CN.js"></script>

    <script>

    KindEditor.ready(function(K) {

    var editor K.editor({

    allowFileManager true

    });

    K('#image').click(function() {

    editor.loadPlugin('image', function() {

    editor.plugin.imageDialog({

    imageUrl K('#url').val(),

    clickFn function(url, title, width, height, border, align) {

    K('#url').val(url);

    editor.hideDialog();

    }

    });

    });

    });

    });

    </script>

    <input type="text" id="url" value="" /> <input type="button" id="image" value="选择 图片/>

    几种常用网页文本编辑器总结

    取色器

    <script src="../kindeditor-min.js"></script>

    <script>

    KindEditor.ready(function(K) {

    var colorpicker;

    K('#colorpicker').bind('click', function(e) {

    if (colorpicker) {

    colorpicker.remove();

    colorpicker null;

    }

    var colorpickerPos K('#colorpicker').pos();

    colorpicker K.colorpicker({

    colorpickerPos.x,

    colorpickerPos.y K('#colorpicker').height(),

    19811214,

    selectedColor 'default',

    noColor '无颜色',

    click function(color) {

    K('#color').val(color);

    colorpicker.remove();

    colorpicker null;

    }

    });

    });

    });

    </script>

    <input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器/>

    几种常用网页文本编辑器总结

     

    四. jsp基本编辑器

    使用步骤:

    1.edit.htm 修改为 edit.jsp

    2.把想要使用的地方包含edit.jsp就行了

      代码:

    <!--富文本编辑器-->

       <%@ include file="edit.jsp"%>  

    注意事项:

    在需要引入编辑器的页面中的onload事件,要结合edit.jsp中的事件

    五. Xheditor

    (1) 解压压缩文件,将其中的xheditor-zh-cn.min.js以及xheditor_emotxheditor_pluginsxheditor_skin三个文件夹上传到网站相应目录

    注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js

     

    (2) 在相应html文件的</head>之前添加

    <script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>

    <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>

    注:如果jQuery之前已经在项目页面中使用,请勿重复添加引用代码

    (3)

    方法1:在textarea上添加属性: class="xheditor"

    例如:<textarea name="content" class="xheditor">test</textarea>

    方法2:在您的页面初始JS代码里加上: $('#elm1').xheditor();

    $('#elm1').xheditor()

    例如:

    $({

    $('#elm1').xheditor()

    });

    相应的卸载编辑器的代码为

    $('#elm1').xheditor(false)

    例:

     

    自定义按钮

    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script>

    <script type="text/javascript">

    $(pageInit);

    function pageInit()

    {

    $.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});

    $('#elm1').xheditor({tools:'full'});

    $('#elm2').xheditor({tools:'mfull'});

    $('#elm3').xheditor({tools:'simple'});

    $('#elm4').xheditor({tools:'mini'});

    $('#elm5').xheditor({tools:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'});

    $('#elm6').xheditor({tools:'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About'});

    }

    function submitForm(){$('#frmDemo').submit();}

    </script>

    1,full(完全):<br />

    <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

    2,mfull(多行完全):<br />

    <textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

    3,simple(简单):<br />

    <textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

    4,mini(迷你):<br />

    <textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

     5,custom(自定义):<br />

    <textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

    6,自定义多行模式:<br />

       <textarea id="elm6" name="elm6" rows="8" cols="80" style="width: 40%">

           当前实例调用的Javascript源代码为

       </textarea>

    几种常用网页文本编辑器总结

    皮肤选择

    注:为了保持项目精简,同一个页面只能调用一个皮肤,当同一界面同时调用多个 皮肤时,最后一个皮肤的按钮面板样式会影响之前的

    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script>

    <script type="text/javascript">

    $(pageInit);

    function pageInit()

    {

    $.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});

    $('#elm1').xheditor({skin:'default'});

    $('#elm2').xheditor({skin:'o2007blue'});

    $('#elm3').xheditor({skin:'o2007silver'});

    $('#elm4').xheditor({skin:'vista'});

    $('#elm5').xheditor({skin:'nostyle'});

    }

    function submitForm(){$('#frmDemo').submit();}

    </script>

    1,默认皮肤:<br/>

    <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

    2,Office 2007 蓝色:<br />

    <textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">

        当前实例调用的Javascript源代码为:

    </textarea>

    几种常用网页文本编辑器总结

    3,Office 2007 银白色:<br />

    <textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为

    </textarea>

    几种常用网页文本编辑器总结

    4,Vista:<br />

    <textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">

       当前实例调用的Javascript源代码为

    </textarea>

    几种常用网页文本编辑器总结

    5,NoStyle:<br />

    <textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">

        当前实例调用的Javascript源代码为

    </textarea>

    几种常用网页文本编辑器总结

     

    六. Tinymce

    使用:

    tinyMCE.init({

    mode "textareas",

    theme "simple" //模式

    skin "o2k7",//word

    });

    默认模式

    <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

    <script type="text/javascript">

    tinyMCE.init({

    mode "textareas",

    theme "simple"

    });

    </script>

    <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">

       This is some example text that you can edit inside the <strong>TinyMCE  editor

    </textarea>

    几种常用网页文本编辑器总结

    皮肤设置

    <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

    <script type="text/javascript">

    tinyMCE.init({

    // General options

    mode "exact",

    elements "elm1",

    theme "advanced",

    plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,

    advlink,emotions,iespell,insertdatetime,preview,media,searchreple,print,contextmenu,paste,directionality,fullscreen,noneditable,

    visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",

     

    // Theme options

         theme_advanced_buttons1 "save,newdocument,|,bold,italic,underline,strikethrough,|,

          justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,

          fontselect,fontsizeselect",

        theme_advanced_buttons2 "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,

    numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw,|,forecolor,backcolor",

    theme_advanced_buttons3 "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,

    charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",

    theme_advanced_buttons4 "insertlayer,moveforward,movebackward,absolute,|,

    styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,

    template,pagebreak,restoredraft",

        theme_advanced_toolbar_location "top",//工具栏位置

        theme_advanced_toolbar_align "left",//工具栏对齐方式

        theme_advanced_statusbar_location "bottom",//状态显示栏的位置

    theme_advanced_resizing true,

    // Example content CSS (should be your site CSS)

    content_css "css/content.css",

    // Drop lists for link/image/media/template dialogs

       template_external_list_url "lists/template_list.js",

       external_link_list_url "lists/link_list.js",

       external_image_list_url "lists/image_list.js",

       media_external_list_url "lists/media_list.js",

    // Replace values for the template plugin

    template_replace_values {

    username "Some User",

    staffid "991234"

    }

    });

    </scritp>

    <textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">

    几种常用网页文本编辑器总结

    <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

    <script type="text/javascript">

    // O2k7 skin

    tinyMCE.init({

    // General options

    mode "exact",

    elements "elm2",

    theme "advanced",

    skin "o2k7",

    plugins "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,

    emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg,xhtmlxtras,template,inlinepopups,autosave",

     

    // Theme options

    theme_advanced_buttons1 "save,newdocument,|,bold,italic,underline,strikethrough,|,

    justifyleft,justifycenter,justifyright,justifyfull,styleselect,

    formatselect,fontselect,fontsizeselect",

    theme_advanced_buttons2 "cut,copy,paste,pastetext,pasteword,|,search,replace,|,

    bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

    theme_advanced_buttons3 "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,

    charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",

    theme_advanced_buttons4 "insertlayer,moveforward,movebackward,absolute,|,

    styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,

    nonbreaking,template,pagebreak,restoredraft",

    theme_advanced_toolbar_location "top",

    theme_advanced_toolbar_align "left",

    theme_advanced_statusbar_location "bottom",

    theme_advanced_resizing true,

     

    // Example content CSS (should be your site CSS)

    content_css "css/content.css",

    // Drop lists for link/image/media/template dialogs

    template_external_list_url "lists/template_list.js",

    external_link_list_url "lists/link_list.js",

    external_image_list_url "lists/image_list.js",

    media_external_list_url "lists/media_list.js",

    // Replace values for the template plugin

    template_replace_values {

    username "Some User",

    staffid "991234"

    }

    });

    </script>

    <textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">

         This is some example text that you can edit inside the <strong>TinyMCE  editor;.

    </textarea>

    几种常用网页文本编辑器总结

    <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

    <script type="text/javascript">

    // O2k7 skin (silver)

    tinyMCE.init({

    // General options

    mode "exact",

    elements "elm3",

    theme "advanced",

    skin "o2k7",

    skin_variant "silver",

    plugins "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,

    iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,

    paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,

    xhtmlxtras,template,inlinepopups,autosave",

     

    // Theme options

    theme_advanced_buttons1 "save,newdocument,|,bold,italic,underline,strikethrough

    ,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

    theme_advanced_buttons2 "cut,copy,paste,pastetext,pasteword,|,search,replace,|,

    bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,

    inserttime,preview,|,forecolor,backcolor",

    theme_advanced_buttons3 "tablecontrols,|,hr,removeformat,visualaid,|,

    sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",

    theme_advanced_buttons4 "insertlayer,moveforward,movebackward,absolute,|,

    styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas,nonbreaking,template,pagebreak,restoredraft",

    theme_advanced_toolbar_location "top",

    theme_advanced_toolbar_align "left",

    theme_advanced_statusbar_location "bottom",

    theme_advanced_resizing true,

     

    // Example content CSS (should be your site CSS)

    content_css "css/content.css",

    // Drop lists for link/image/media/template dialogs

    template_external_list_url "lists/template_list.js",

    external_link_list_url "lists/link_list.js",

    external_image_list_url "lists/image_list.js",

    media_external_list_url "lists/media_list.js",

    // Replace values for the template plugin

    template_replace_values {

    username "Some User",

    staffid "991234"

    }

    });

    </script>

    <textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">

        This is some example text that you can edit inside the <strong>TinyMCE 

    </textarea>

    几种常用网页文本编辑器总结

    <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

    <script type="text/javascript">

    // O2k7 skin (silver)

    tinyMCE.init({

    // General options

    mode "exact",

    elements "elm4",

    theme "advanced",

    skin "o2k7",

    skin_variant "black",

    plugins "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,

    iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,

    paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,

    xhtmlxtras,template,inlinepopups,autosave",

     

    // Theme options

    theme_advanced_buttons1 "save,newdocument,|,bold,italic,underline,strikethrough

    ,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

    theme_advanced_buttons2 "cut,copy,paste,pastetext,pasteword,|,search,replace

    ,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,

    redo,|,link,unlink,anchor,image,cleanup,help,code,|,

    insertdate,inserttime,preview,|,forecolor,backcolor",

    theme_advanced_buttons3 "tablecontrols,|,hr,removeformat,visualaid,|,

    sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",

    theme_advanced_buttons4 "insertlayer,moveforward,movebackward,absolute

    ,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",

    theme_advanced_toolbar_location "top",

    theme_advanced_toolbar_align "left",

    theme_advanced_statusbar_location "bottom",

    theme_advanced_resizing true,

    // Example content CSS (should be your site CSS)

    content_css "css/content.css",

    // Drop lists for link/image/media/template dialogs

    template_external_list_url "lists/template_list.js",

    external_link_list_url "lists/link_list.js",

    external_image_list_url "lists/image_list.js",

    media_external_list_url "lists/media_list.js",

    // Replace values for the template plugin

    template_replace_values {

    username "Some User",

    staffid "991234"

    }

    });

    </script>

    <textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">

        This is some example text that you can edit inside the ;

    </textarea>

    几种常用网页文本编辑器总结

    七. ueditor1

    1.避免了重复加载源码高亮的核心代码

    2.修复了word粘贴table过滤出错问题

    3.修复插入地图会出现style="undefined"的问题

    4.优化了list,多个相邻的属性一直的list会合并

    5.可以在列表中的一行里产生多行的效果(通过回车再回退操作),类似office的效果

    6.添加自定义样式功能

    7.修了在chrome下右键删除td里的图片会把整个td删除的问题

    8.改进了不同的页面调用一个editorURL问题

    9.增加了颜色选择器的颜色

    10.改进了提供的后台程序的安全性

    11.代码高亮支持折行

    12.改进了源码编辑模式下的性能(ie),并且支持自动换行

    13.修改了在destroy之后会在ie下报错的问题

    14.给初始化容器name值,那么在后台取值的键值就是name给定的值,方便多实例在一个form下提交

    15.支持插入script/style这样的标签

    16.修复了列表里插入浮动图片,图片不占位问题

    17.源码模式下,去掉了pre中的 

    18.完善了_example下的demo例子

    19.base64的图片被过滤掉了

     使用方法:var editorOption {

                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个

                toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],

                //focus时自动清空初始化时的内容

                autoClearinitialContent:true,

                //关闭字数统计

                wordCount:false,

                //关闭elementPath

                elementPathEnabled:false

                //更多其他参数,请参考editor_config.js中的配置项

            };

            var editor_a new baidu.editor.ui.Editor(editorOption);

            editor_a.render( textareaId );

    例:

    简单应用

    <script type="text/javascript">

            var UEDITOR_HOME_URL "../";   //指向dialogsthemes等目录的父目 录,推荐使用/开头的绝对路径

     </script>

      <script type="text/javascript" charset="utf-8" src="../editor_config.js"></script>

        <!--使用版-->

        <!--<script type="text/javascript" charset="utf-8" src="../editor_all.js"></script>-->

        <!--开发版-->

     <script type="text/javascript" charset="utf-8" src="editor_api.js">

            paths [

                'editor.js',

                'core/browser.js',

                'core/utils.js',

                'core/EventBase.js',

                'core/dom/dom.js',

                'core/dom/dtd.js',

                'core/dom/domUtils.js',

                'core/dom/Range.js',

                'core/dom/Selection.js',

                'core/Editor.js',

                'commands/inserthtml.js',

                'commands/image.js',

                'commands/justify.js',

                'commands/font.js',

                'commands/link.js',

                'commands/map.js',

                'commands/iframe.js',

                'commands/removeformat.js',

                'commands/blockquote.js',

                'commands/indent.js',

                'commands/print.js',

                'commands/preview.js',

                'commands/spechars.js',

                'commands/emotion.js',

                'commands/selectall.js',

                'commands/paragraph.js',

                'commands/directionality.js',

                'commands/horizontal.js',

                'commands/time.js',

                'commands/rowspacing.js',

                'commands/lineheight.js',

                'commands/cleardoc.js',

                'commands/anchor.js',

                'commands/delete.js',

                'commands/wordcount.js',

                'plugins/pagebreak/pagebreak.js',

                'plugins/checkimage/checkimage.js',

                'plugins/undo/undo.js',

                'plugins/paste/paste.js', //粘贴时候的提示依赖了UI

                'plugins/list/list.js',

                'plugins/source/source.js',

                'plugins/shortcutkeys/shortcutkeys.js',

                'plugins/enterkey/enterkey.js',

                'plugins/keystrokes/keystrokes.js',

                'plugins/fiximgclick/fiximgclick.js',

                'plugins/autolink/autolink.js',

                'plugins/autoheight/autoheight.js',

                'plugins/autofloat/autofloat.js', //依赖UEditor UI,IE6中,会覆盖掉body的背景图属性

                'plugins/highlight/highlight.js',

                'plugins/serialize/serialize.js',

                'plugins/video/video.js',

                'plugins/table/table.js',

                'plugins/contextmenu/contextmenu.js',

                'plugins/pagebreak/pagebreak.js',

                'plugins/basestyle/basestyle.js',

                'plugins/elementpath/elementpath.js',

                'plugins/formatmatch/formatmatch.js',

                'plugins/searchreplace/searchreplace.js',

                'plugins/customstyle/customstyle.js',

                'ui/ui.js',

                'ui/uiutils.js',

                'ui/uibase.js',

                'ui/separator.js',

                'ui/mask.js',

                'ui/popup.js',

                'ui/colorpicker.js',

                'ui/tablepicker.js',

                'ui/stateful.js',

                'ui/button.js',

                'ui/splitbutton.js',

                'ui/colorbutton.js',

                'ui/tablebutton.js',

                'ui/toolbar.js',

                'ui/menu.js',

                'ui/combox.js',

                'ui/dialog.js',

                'ui/menubutton.js',

                'ui/datebutton.js',

                'ui/editorui.js',

                'ui/editor.js',

                'ui/multiMenu.js'

            ];

        </script>

    <script type="text/javascript">

    // 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置

            var editorOption {

                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个

                toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],

                //focus时自动清空初始化时的内容

                autoClearinitialContent:true,

                //关闭字数统计

                wordCount:false,

                //关闭elementPath

                elementPathEnabled:false

                //更多其他参数,请参考editor_config.js中的配置项

            };

            var editor_a new baidu.editor.ui.Editor(editorOption);

            editor_a.render( 'myEditor' );

     </script>

    <script type="text/plain" id="myEditor" style="width:500px">

            <p>这里我可以写一些输入提示</p>

        </script>

    几种常用网页文本编辑器总结


    原文出处:http://blog.sina.com.cn/s/blog_9433c40401010p5t.html


    展开全文
  • 原生JS实现富文本编辑

    万次阅读 2018-07-26 14:00:48
    文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器,比如Quill Rich Text Editor、ueditor等,都是很优秀的富文本编辑器。在我们写网页的时候也会用到它,通常省事的方法就是-------引用插件,但是...

    富文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器,比如Quill Rich Text Editorueditor等,都是很优秀的富文本编辑器。在我们写网页的时候也会用到它,通常省事的方法就是-------引用插件,但是有些插件的样式不是需求的样式,要修改插件的样式就比较麻烦,所以尝试自己写了一个。

    主要利用的是document.execCommand

    先来看一下document.execCommand的介绍:当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。

    简单来说就是可以利用document.execCommand的属性和contentEditable就可以做我们想要的效果

    布局部分的代码(注意输入区域的div要设置contentEditable哦):

    <div id="wrapper">
    	<div id="control_area"></div>
    
    	<div id="text_area" contenteditable></div>
    </div>

    布局好了,分为控制区和输入区,接下来要对两部分分别进行操作,在控制区域,就是可以设置样式的各种按钮。参考document.execCommand的语法:

     主要控制到样式的有两个:aCommandName和aValueArgument。因此我们需要在每个按钮上传递两个变量。第一个是必填项aCommandName,第二个是选填项aValueArgument。我们考虑采用HTML5的新属性data-*传递这两个参数:

    <a href="#" data-command='italic' onclick="changeStyle(this.dataset)">斜体</a>
    <a href="#" data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1号</a>

    最后我们控制部分的按钮布局为:

    <div id="control-area">
    	<!--调整为斜体-->
    	<a href="#" data-command='italic' onclick="changeStyle(this.dataset)">斜体</a>
    	<!--调整字号为1号-->
    	<a href="#" data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1号</a>
    	<!-- 调整字体颜色为红色 -->
    	<a href="#" data-command='foreColor' data-value="red" onclick="changeStyle(this.dataset)">红色</a>
    	<!-- 调整字体为楷体 -->
    	<a href="#" class='btn middle blue' data-command='fontName' data-value="KaiTi" onclick="changeStyle(this.dataset)">楷</a>
    	<!-- 添加删除线 -->
    	<a href="#" class='btn right grey' data-command='strikeThrough' onclick="changeStyle(this.dataset)">删除线</a>
    	<!-- 调整字体颜色为黑色 -->
    	<a href="#" class='btn middle' data-command='foreColor' data-value="black" onclick="changeStyle(this.dataset)">黑</a>
    </div>

     重点贴上JS代码,朋友们

    <script type="text/javascript">
    		const changeStyle = (data) => {
    		    data.value? document.execCommand(data.command, false, data.value):document.execCommand(data.command, false, null)
    		}
    </script>

     这样一个轻量级的富文本编辑器就出来啦,样式我就不贴了,如果有更好的方法希望大家可以提出来,另贴上document.execCommand的其他方法,这里就不一一调例了:

    backColor

    修改文档的背景颜色。在styleWithCss模式下,则只影响容器元素的背景颜色。这需要一个<color> 类型的字符串值作为参数传入。注意,IE浏览器用这个设置文字的背景颜色。

    bold

    开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 <strong>标签,而不是<b>标签。

    contentReadOnly

    通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)

    copy

    拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。

    createLink

    将选中内容创建为一个锚链接。这个命令需要一个HREF URI字符串作为参数值传入。URI必须包含至少一个字符,例如一个空格。(浏览器会创建一个空链接)

    cut

     剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。

    decreaseFontSize

     给选中文字加上 <small> 标签,或在选中点插入该标签。(IE浏览器不支持)

    delete

    删除选中部分.

    enableInlineTableEditing

    启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)

    enableObjectResizing

    启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)

    fontName

    在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如:"Arial")作为参数。

    fontSize

    在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。

    foreColor

    在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。

    formatBlock

    添加一个HTML块式标签在包含当前选择的行, 如果已经存在了,更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)

    forwardDelete

    删除光标所在位置的字符。 和按下删除键一样。

    heading

    添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)

    hiliteColor

    更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)

    increaseFontSize

    在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)

    indent

    缩进选择或插入点所在的行, 在 Firefox 中, 如果选择多行,但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。

    insertBrOnReturn

    控制当按下Enter键时,是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)

    insertHorizontalRule

    在插入点插入一个水平线(删除选中的部分)

    insertHTML

    在插入点插入一个HTML字符串(删除选中的部分)。需要一个个HTML字符串作为参数。(IE浏览器不支持)

    insertImage

    在插入点插入一张图片(删除选中的部分)。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以(IE会创建一个链接其值为null)

    insertOrderedList

    在插入点或者选中文字上创建一个有序列表

    insertUnorderedList

    在插入点或者选中文字上创建一个无序列表。

    insertParagraph

    在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)

    insertText

    在光标插入位置插入文本内容或者覆盖所选的文本内容。

    italic

    在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签,而不是 I )

    justifyCenter

    对光标插入位置或者所选内容进行文字居中。

    justifyFull

    对光标插入位置或者所选内容进行文本对齐。

    justifyLeft

    对光标插入位置或者所选内容进行左对齐。

    justifyRight

    对光标插入位置或者所选内容进行右对齐。

    outdent

    对光标插入行或者所选行内容减少缩进量。

    paste

    在光标位置粘贴剪贴板的内容,如果有被选中的内容,会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].

    redo

    重做被撤销的操作。

    removeFormat

    对所选内容去除所有格式

    selectAll

    选中编辑区里的全部内容。

    strikeThrough

    在光标插入点开启或关闭删除线。

    subscript

    在光标插入点开启或关闭下角标。

    superscript

    在光标插入点开启或关闭上角标。

    underline

    在光标插入点开启或关闭下划线。

    undo

    撤销最近执行的命令。

    unlink

    去除所选的锚链接的<a>标签

    useCSS 

    切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)
    该属性已经废弃,使用 styleWithCSS 代替。

    styleWithCSS

    用这个取代 useCSS 命令。 参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。

    如还有其他疑问可以参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

    展开全文
  • js实现表格编辑功能

    2018-08-13 14:36:23
    类似excel的编辑功能,可以修改文本编辑,复制,黏贴
  • 网页中添加富文本编辑器——UEditor的使用

    万次阅读 多人点赞 2017-09-01 17:09:12
    利用百度公司的开源项目UEditor实现在jsp页面中加入富文本编辑功能
  • jsTextOperation 网页文本选中高亮,关键字搜索高亮 文本编辑元素中的文本选择(Input, TextArea) document.activeElement() 方法 跨标签文本选择 Selection 对象,window.getSelection() 方法
  • 如果你需要的是一款能够进行Web代码设计的文本编辑器,那么它一定会是一款很不错的软件。它给我的总体印象就是专业却不令人生畏,文字和图标结合的都很好。 网页编辑工具 Bluefish 中文版网页编辑工具 Bluefish ...
  • UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 2bootstrap-wysiwyg 官方网址:...
  • 最近在有项目需要手机端编辑器,找到两个自我感觉不错的,分享下。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,817
精华内容 25,526
关键字:

网页文本编辑js