`
Reverie夜
  • 浏览: 21501 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类
最新评论

jquery轻量级文本编辑器Trumbowyg

阅读更多

ლ(╹◡╹ლ)感觉介个比CKDitor好用~可能~或许~大概~

先下一个trumbowyg吧~把css和js引入~

<link rel="stylesheet" href="trumbowyg/design/css/trumbowyg.css">
<script src="trumbowyg/jquery.min.js"></script>
        <script src="trumbowyg/trumbowyg.js"></script>
        <script src="trumbowyg/langs/fr.js"></script>
        <script src="trumbowyg/plugins/upload/trumbowyg.upload.js"></script>
        <script src="trumbowyg/plugins/base64/trumbowyg.base64.js"></script>

使用方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

EINS(基本用法):

 <form action="">
        <div id="simple-editor">夜月</div>
  </form>
  <script>$('#simple-editor').trumbowyg();</script>

 

 

ZWEI(自定义按钮):

<div id="customized-buttonpane" class="editor">
            <h2>夜月</h2>
</div>
<script>
        $.trumbowyg.btnsGrps.test = ['bold', 'link'];
        $.extend(true, $.trumbowyg.langs, {
                fr: {
                    align: 'Alignement',
                    image: 'Image'
                }
            });
        
        $('#customized-buttonpane').trumbowyg({
                lang: 'fr',
                closable: true,
                fixedBtnPane: true,
                btnsDef: {
                    align: {
                        dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                        ico: 'justifyLeft'
                    },
                    image: {
                        dropdown: ['insertImage', 'upload', 'base64'],
                        ico: 'insertImage'
                    }
                },
                btns: ['viewHTML',
                    '|', 'formatting',
                    '|', 'btnGrp-test',
                    '|', 'align',
                    '|', 'btnGrp-lists',
                    '|', 'image']
            });
</script>

 

 直接用上面的代码你会发现怎么少了个G~因为少了以下的代码_(:з」∠)_

 $.trumbowyg.btnsGrps.test = ['bold', 'link'];
 $.extend(true, $.trumbowyg.langs, {
       fr: {
            align: 'Alignement',
            image: 'Image'
       }
  });

 

DREI(textarea也可以,简单的定制与当前的选项):

        <textarea id="night" cols="30" rows="10">
            <h2>夜月</h2>
        </textarea>
        <script>
       		$('#night').trumbowyg({
                lang: 'fr',
                closable: true,
                mobile: true,
                fixedBtnPane: true,
                fixedFullWidth: true,
                semantic: true,
                resetCss: true,
                autoAjustHeight: true,
                autogrow: true
            });
        </script>

 

 

 

  • 大小: 37.7 KB
  • 大小: 30.7 KB
  • 大小: 36.7 KB
分享到:
评论

相关推荐

    jQuery富文本编辑器Notebook

    "jQuery富文本编辑器Notebook"是一个专为创建简洁、整洁且美观的所见即所得(WYSIWYG)编辑器而设计的工具。这款编辑器利用了流行的jQuery库,旨在提供一个用户友好的界面,使得内容创作者可以轻松地进行文字编辑、...

    jquery轻量级文本编辑器

    为了更好地理解和使用这款编辑器,压缩包中的"轻量级编辑器"文件很可能包含了一个简单的示例,你可以通过查看和运行这个示例来学习如何配置和定制编辑器以满足项目需求。示例可能包括了HTML、CSS和JavaScript文件,...

    轻量级文本编辑器Trumbowyg

    **轻量级文本编辑器Trumbowyg** Trumbowyg是一款备受青睐的轻量级文本编辑器,因其简洁而美观的设计以及强大的功能而受到广泛关注。这款编辑器旨在提供一个直观且高效的用户界面,使得非程序员也能轻松创建和编辑富...

    jQuery+Bootstarp富文本编辑器插件summernote

    jQuery 是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。Bootstrap 是一个流行的前端框架,提供了一套响应式布局、移动设备优先的组件和工具,用于快速构建美观的、可适应各种屏幕尺寸...

    jQuery轻量级响应式幻灯片插件EasyFader.rar

    jQuery轻量级响应式幻灯片插件EasyFader.rar jQuery轻量级响应式幻灯片插件EasyFader.rar jQuery轻量级响应式幻灯片插件EasyFader.rar jQuery轻量级响应式幻灯片插件EasyFader.rar jQuery轻量级响应式幻灯片插件...

    简单的jQuery富文本编辑器插件

    综上所述,这个富文本编辑器插件利用了jQuery的强大功能和CSS3的先进特性,为开发者提供了一个轻量级且易于集成的解决方案,以实现网页上的文本编辑需求。通过学习和使用这个插件,开发者可以进一步掌握jQuery的DOM...

    jquery 一款轻量级网页编辑器

    总的来说,这款jQuery轻量级网页编辑器是快速构建简单、高效编辑功能的理想选择。它的设计哲学是“少即是多”,在保证基本功能的同时,确保了良好的用户体验和性能。对于那些不需要复杂编辑功能的网站,它是值得考虑...

    jQuery轻量级树状菜单插件代码

    本篇文章将深入探讨如何使用jQuery创建一个轻量级的树状菜单插件,帮助开发者构建交互式的网页导航结构。 首先,我们需要理解树状菜单的基本概念。树状菜单是一种层次结构的展示方式,常用于网站导航或文件系统,...

    轻量级在线编辑器,基于jquery

    标题中的“轻量级在线编辑器,基于jquery”指的是一个使用jQuery库开发的、设计简洁且功能相对简单的网页文本编辑工具。这样的编辑器通常用于网站内容管理系统(CMS)或者论坛等,让用户可以在网页上直接编辑和格式...

    轻量级jQuery文本编辑器插件Froala WYSIWYG Editor

    **轻量级jQuery文本编辑器插件Froala WYSIWYG Editor** Froala WYSIWYG Editor是一款高效、易用且功能丰富的jQuery富文本编辑器,它为Web开发者提供了一个优雅的方式来实现用户界面中的文本编辑功能。这款编辑器以...

    jQuery+Bootstarp富文本编辑器插件summernote.js.zip

    jQuery是一款轻量级的JavaScript库,它的主要优点是简化DOM操作、事件处理和动画效果。Bootstrap则是最受欢迎的前端开发框架,它提供了一套完整的响应式设计和组件,便于快速构建美观的网页。当jQuery与Bootstrap...

    js,jquery文本编辑器

    HtmlBox是一款基于jQuery的轻量级文本编辑器,其设计目标是简单易用。HtmlBox 4.0.3版本提供了基本的文本格式化选项,如字体、大小、颜色等,并支持图片和超链接的处理。由于体积小,加载速度快,适合对性能有较高...

    jQuery轻量级编辑器 jquerypad

    方便简洁,且所见即所得jQuery编辑器。特别适合编写练习单个...这是一个轻量级编辑器,但需要.netframework2.0及以上版本的环境下运行 2.将下载的最新版本jQuery包替换到Templates文件夹下的jQuery.js(注意名称得相同)

    jquery页面文本编辑器

    HtmlBox是一款高效、轻量级的jQuery文本编辑器,旨在提供类似Word的在线编辑体验。该编辑器支持多种样式,可以满足不同网站设计的需求。HtmlBox 4.0.3作为较新的版本,不仅在性能上有所提升,还增加了一些新的功能...

    Trumbowyg基于jquery的轻量WYSIWYG编辑器

    Trumbowyg 是一个轻量,可定制的 jQuery 所见即所得(WYSIWYG)的编辑器插件。美丽的设计,生成语义化代码,带有功能强大的 API 。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器,如 IE8 、Chrome、...

    jquery插件集-web文本编辑器jwysiwyg

    `jWYSIWYG`是一个基于jQuery的轻量级插件,它提供了一个所见即所得(WYSIWYG)的编辑界面,使得用户在网页上可以像使用桌面应用那样进行文本编辑。这款插件以其小巧、易于集成和使用的特点受到开发者的青睐。 **一...

    jquery轻量级图标生成器配中文文档

    《jQuery轻量级图标生成器与Highcharts中文文档解析》 在现代Web开发中,数据可视化扮演着至关重要的角色,能够有效地将复杂的数据转化为易于理解的图表。jQuery轻量级图标生成器是一款强大的工具,它使得开发者...

    H5下最简洁好用的富文本编辑器

    在现代Web开发中,富文本编辑器是必不可少的工具,特别是在需要用户输入格式化内容的场景下,如博客、论坛、评论系统等。H5(HTML5)作为最新的Web标准,提供了更多的API和功能,使得富文本编辑器的实现更加方便和...

Global site tag (gtag.js) - Google Analytics