jquery轻量级文本编辑器Trumbowyg

所属分类:输入-通用输入

 79512  83  查看评论 (29)
jquery轻量级文本编辑器Trumbowyg ie兼容8

使用方法

首先,添加jQuery到页面<body>位置:

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Trumbowyg需要jQuery > = 1.7,因为它使用.on()一个新的函数出现在1.7版本。


在这之后,你必须加载Trumbowyg。

<script src="js/vendor/trumbowyg.min.js"></script>


别忘了Trumbowyg CSS到<head>,或负载编辑您自己的风格。

<link rel="stylesheet" href="css/vendor/trumbowyg.css">

基础知识

这最少的代码将一个简单的div Trumbowyg到神奇的WYSIWYG编辑器。

$('#trumbowyg-demo').trumbowyg();


如果你想设置Trumbowyg选项,添加一个包含你的选择对象作为参数。

$('#trumbowyg-demo').trumbowyg({
    fullscreenable: false,
    closable: true,
    btns: ['bold', 'italic', '|', 'insertImage']
});


==================以下内容由  create_time 提供===================

Trumbowyg 1.17,颜色插件用法,

<script>
            $('#my-editor').trumbowyg({
            	//设置中文
                lang: 'zh_cn',
                // closable: true,
                fixedBtnPane: true,
                //设置颜色插件
                btnsAdd: ['foreColor','backColor'],
                 btnsDef: {
        // 设置上传的3种方法,远程上传,本地上传,图片64位加密
        image: {
		            dropdown: ['insertImage', 'upload','base64'],
		            ico: 'insertImage'
		        }
		    },
			    // Redefine the button pane
			    btns: ['viewHTML',
			            '|', 'formatting',
			            '|', 'btnGrp-semantic',
			            '|', 'link',
			            '|', 'image',
			            '|', 'btnGrp-justify',
			            '|', 'btnGrp-lists',
			            '|', 'horizontalRule']
            });
        </script>

颜色插件在 dist目录下的plugins目录下!

相关插件-通用输入

不容错过的内嵌代码编辑器高亮代码-JSFIDDLE

如果你的网站需要展示某些源码:html、css、js。那么你可以选择我之前介绍的两款代码高亮插件:SYNTAXHIGHLIGHTER 或者 SNIPPET 不过今天我要给大家介绍另外一款工具,下面我来大致介绍一下这款工具的特点。
  通用输入
 27116  43

js中文简体繁体切换

js中文简体繁体切换
  通用输入
 796  7

CSS3 过渡特性创建信封效果的联系表单

CSS3 过渡特性创建信封效果的联系表单
  通用输入
 11993  68

解决IE下不支持placeholder属性

解决IE下不支持placeholder属性可以根据自己的需要去扩展.
  通用输入
 23253  69

讨论这个项目(29)回答他人问题或分享插件使用方法奖励jQ币

    刘永华315 0
    2017/9/26 16:28:15

    为什么在IE8浏览器按钮变成这样,纵向排列?

    回复
    轻触指尖的冰凉 0
    2017/8/28 17:33:23

    设置了中文后,为什么英文输入就不行??,怎么解决呀?

    回复
    余人。 0
    2017/8/22 12:06:23

    怎样设置中文的

    回复
    0
    2017/8/16 14:53:45

    怎么没有颜色选择呢

    回复
    上善若水 0
    2017/8/8 2:09:01

    $('.editor').trumbowyg('html')这个怎么获取内容呢?

    回复
    初遇在街角ブ 0
    2017/7/29 10:52:25

    怎么事先设置文本编辑域的内容呢

    回复
    m就那样儿m 0
    2017/4/5 16:29:03
    hy 0
    2017/3/24 16:32:45
    杨先森 0
    2016/12/5 17:12:49
    怎么获取输入的内容啊
        刘新宇0
        2017/5/19 13:48:22

        你好,我也想了解下怎么获取内容,请问你有解决的方法了么

        刘新宇1
        2017/5/23 11:15:56
        $('.editor').trumbowyg('html')
    回复
    []~~[]幸福 0
    2016/10/27 12:10:17
    为什么插入到asp.net mvc里面出现Uncaught TypeError: Cannot read property 'btnsGrps' of undefined(…)??
        0
        2017/7/21 16:16:28

        你解决了吗

        我也是这样

    回复
取消回复