官方文档：http://www.wangeditor.com/

效果

html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>wangEditor demo</title>

        <style>

            *{

                font-size:14px;

            }

        </style>

    </head>

    <body>

        <div id="editor">

            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>

        </div>

        <button id="controlBtn" onclick="changeState()">禁用</button>

        <button id="getBtn" onclick="getContent()">获取内容</button>

        <p>html：</p>

        <div id="content_html"></div>

        <p>text：</p>

        <div id="content_text"></div>

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

        <!-- 注意， 只需要引用 JS，无需引用任何 CSS-->

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

        <script type="text/javascript">

            var E = window.wangEditor

            var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') )

            editor.customConfig.menus = [ // 自定义菜单配置,默认有以下菜单

                'head', // 标题

                'bold', // 粗体

                'fontSize', // 字号

                'fontName', // 字体

                'italic', // 斜体

                'underline', // 下划线

                'strikeThrough', // 删除线

                'foreColor', // 文字颜色

                'backColor', // 背景颜色

                'link', // 插入链接

                'list', // 列表

                'justify', // 对齐方式

                'quote', // 引用

                'emoticon', // 表情

                'image', // 插入图片

                'table', // 表格

                'video', // 插入视频

                'code', // 插入代码

                'undo', // 撤销

                'redo' // 重复

            ]

            editor.customConfig.uploadImgServer = '上传图片服务器';

            // editor.customConfig.uploadImgFileName = '';

            editor.customConfig.menuFixed = false; // 关闭菜单栏fixed,吸顶问题

            editor.create()

            var state = true;

            function changeState() {

                state = !state;

                if (state) {

                    $('#controlBtn').html('禁用');

                    // 开启编辑功能

                    editor.$textElem.attr('contenteditable', true); //注意wangeditor的版本，不同版本可能方法不一

                } else {

                    $('#controlBtn').html('启用');

                    // 禁用编辑功能

                    editor.$textElem.attr('contenteditable', false);

                }

            }

            function getContent() {

                var e_html = editor.txt.html(); //获取html

                var e_text = editor.txt.text(); //获取text

                $('#content_html').text(e_html);

                $('#content_text').text(e_text);

            }

        </script>

    </body>

</html>

wangEditor富文本框——例的更多相关文章

  1. 基于bootstrap的富文本框——wangEditor【欢迎增加开发】

    先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多 ...

  2. web轻量级富文本框编辑

    前言 主要介绍squire,wangeditor富文本编辑 以及用原生js 如何实现多个关键字标识 需求 如何标记多个关键字,取消关键字 第一种方法 原生 textarea 标记 准备资料参考:张鑫旭 ...

  3. kindeditor富文本框，上传文件后，显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...

  4. selenium 富文本框处理

    selenium 富文本框处理, 网上有用API的解决方法1:参见:http://blog.csdn.net/xc5683/article/details/8963621 群里1位群友的解决方法2:参 ...

  5. 更加简洁易用——wangEditor富文本编辑器新版本发布

    1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...

  6. H5页面设计器，仿有赞商城页面在线设计器，比富文本框更友好的内容编辑器

    基本上每个web应用,都会牵扯到内容编辑,尤其是移动的web应用,微信开发之类的.页面内容自定义是最常用的功能了,之前大部分解决方案都是采用富文本框编辑器kindeditor,ueditor,cked ...

  7. selenium向富文本框填写内容的几种方式

    富文本框如果是iframe,则用下 1.先跳转到irame,dr.switchTo().frame(wtext); 然后用js JavascriptExecutor jsExecutor = (Jav ...

  8. C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色

    在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...

  9. 【自动化测试】Selenium处理富文本框

    http://blog.csdn.net/fudax/article/details/8089404 selenium处理富文本框,日历控件等 调用JS修改value值 document.getEle ...

随机推荐

  1. 【转载】带你吃透RTMP

    RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写,它是由Adobe公司提出的一种应用层的协议,用来解决多媒体数据传输流的多路复用(Multiplexing) ...

  2. 暑期集训日志（Day6~Day17）

    章·十七:2019-07-28:为谁辛苦为谁甜 ·昨日小结 颓爆了QAQ,昨天又垫底了. 最简单一道题弃疗的我直接被甩倒了总榜垫底…… 我……不想说啥…… 我是渣比. 我不能颓废了. 醒来啊麦克白! ...

  3. Java中JNI的使用详解第五篇:C/C++中操作Java中的数组

    在Java中数组分为两种: 1.基本类型数组 2.对象类型(Object[])的数组(数组中存放的是指向Java对象中的引用) 一个能通用于两种不同类型数组的函数: GetArrayLength(ja ...

  4. [NOI.AC] count

    思路: 考虑组合数学. 当所求中没有重复的时候,方案数就是\(C_{n + 1}^{k}\) 当有重复的时候... 设相等的数字之间的距离为\(len\) 当取0个数时,方案数就是\(C_{n - 1 ...

  5. iOS7 AVAudioRecorder不能录音

    今天写录音代码的时候,在iOS7以下就可以录音,但是iOS7上不可以,后来才知道iOS7录音方式变了,加上下面的代码就可以了,bingo AVAudioSession *audioSession = ...

  6. hdu多校第十场 1009 （hdu6699） Block Breaker bfs/模拟

    题意: 紧密排列的方块因为摩擦力一个一个稳定地挤在一起,但当一个方块的四个邻居中,上下两个至少空缺一个,左右两个至少空缺一个,则这个方块也将掉落. 每次锤掉一个方块,求多少个方块受牵连落下. 题解: ...

  7. WinDbg解决BHO不加载

    昨天zhengwei同学说他机器上的一个BHO不能正常加载,我把BHO的代码拿过来,在我的两台机器上都验证了一下,一台是Win7+IE8的环境,一台是XP+IE7的环境,都能正常加载.zhengwei ...

  8. CVE-2019-0708简单复现

    各文件对应位置 rdp.rb -> /usr/share/metasploit-framework/lib/msf/core/exploit/rdp.rb rdp_scanner.rb -> ...

  9. sp_executeSql 用法 执行有参数的sql字符串 出现必须声明标量变量 "@XXX"。

    今天遇到了一个难题 就是把 一个拼接sql语句 的返回值 赋值给一个变量 经研究 要用sp_executeSql这个存储过程 据说是从sql 2005才开始有的 代码如下: declare @str ...

  10. 【HDUOJ】1213 How many tables

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1213 题意:Ignatius邀请了n个朋友来家里,朋友之间如果互相不认识的不想坐一起,所以至少要准备几 ...