trumbowyg 超级轻量级文本编辑器使用说明

来源：互联网发布：网页描述如何优化编辑：程序博客网时间：2024/06/03 15:59

trumbowyg 超级轻量级文本编辑器使用说明

最近项目里要用一个富文本编辑器，鉴于项目实际要求，编辑器不能太大，要是轻量级的。

目前文本编辑主流的大致有以下几种：

国产编辑器：百度ueditor，kindEditor，

国外编辑器：simditor，jwysiwyg 等

这里我推荐一下 bootstrap-wysiwyg ，我个人是比较喜欢的，基于bootstrap，目前项目中用bootstrap开发的项目不再少数，所以用上这个jquery bootstrap小插件是再好不过的了，5kb，<200行代码做到了超轻量级。

本章案例，我这里使用的是 trumbowyg 编辑器，之所以使用它，也是看中它的灵活性，可操作性，以及个人比较喜欢的界面风格，百搭。

这里简单介绍一下：Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语义化代码，带有功能强大的 API 。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox 。

这里先放出它的文档链接：http://alex-d.github.io/Trumbowyg/#home

这款编辑器相对来说比较小众，网上相关文档和案例较少，使用中有不少问题，经过我的总结使用，写了一个使用文档，如有错误之处，欢迎指正交流。

那么，现在我们开始使用这款编辑器。

1、下载Trumbowyg项目文档

进入http://alex-d.github.io/Trumbowyg/#home，点击download下载。

2、创建你一个你自己的项目文档

这里我创建一个项目作为演示，也可以直接放到项目中去。

这里我已经搭建好了grunt环境，在项目中建立一个 src 文件夹，里面对应创建即可。

把刚刚下载的项目文件里的对应文件拷贝过来，如上图所示：

plugins里面放扩展插件
language里放语言脚本
lib里是我的包管理系统里提取的核心文件，这里暂时不需要
image是编辑器界面ui所需图片
js里是脚本文件：trumbowyg.js是核心脚本，config_file.js为配置文件。
dist文件里的是我自动生成的压缩合并处理的文件

3、创建html：

这里我直接上图，html如下图所示：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>gcx_editor</title>    <link rel="stylesheet" href="dist/css/merge/Trumbowyg_all.min.css">    <!--<link rel="stylesheet" href="src/css/trumbowyg.css">-->    <!--<link rel="stylesheet" href="src/plugins/colors/ui/trumbowyg_colors.css">-->    <!--<link rel="stylesheet" href="src/css/trumbowyg_btn.css">--></head><body>    <!--外部套一个div，编辑有放大编辑区域按钮，放大后，缩放到.main的大小-->   <div id="main" role="main" style="max-width: 960px;margin: 0 auto;">       <!--编辑器写在form表单里面，直接可以post提交-->        <form action="reg_new.php" method="post">            <div id="gcx_editor">                <h2>超级轻量级文本编辑器 Adaptation by gcx </h2>                <p>original：trumbowyg，Adaptation by gcx</p>            </div>            <!--这里我加了2个按钮，一个提交，一个清空，相应的我在配置文件里写了清空的js脚本，直接调用清空-->            <div class="editor_btn">                <input type="submit" class="editor_submit" value="submit">                <input type="button" value="reset" class="editor_reset" onclick="editor_reset()"/>            </div>        </form>    </div>    <!--移除了 load()、unload() 和 error() 方法,其实在 jQuery1.8 时，这些方法就被废弃了，    但当时还存在于 jQuery 源码中，从 jQuery3 开始，这些方法就被彻底移除了。如果你使用的第三方插件    依赖了这些方法，将会报错。因此，升级时，还是注意下吧。-->    <!--<script src="src/js/jquery-3.1.0.js"></script>-->    <!--<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>-->    <script src="dist/js/jquery-1_8_3.min.js"></script>    <script src="dist/js/merge/Trumbowyg_all.min.js"></script>    <script src="dist/js/config_file.min.js"></script>    <!--<script src="src/js/trumbowyg.js"></script>-->    <!--<script src="src/js/language/zh_cn.js"></script>-->    <!--<script src="src/plugins/upload/trumbowyg_upload.js"></script>-->    <!--<script src="src/plugins/base64/trumbowyg_base64.js"></script>-->    <!--<script src="src/plugins/colors/trumbowyg_colors.js"></script>-->    <!--<script src="src/plugins/emoji/trumbowyg_emoji.js"></script>--></body></html>

这里注意下：

1、从jquery1.8开始，load(),unload(),error()方法已经废除了，只不过在jquery1.8时，这些方法还存在于jquery源码中，从jquery3.x开始，这些方法彻底移除，如果你使用了第三方插件，依赖于这些方法，会报错，所以这里要注意一下，我们这里引用依赖的jquery插件为1.8.3版本的，切勿使用jquery3.0以上版本。

编辑除了自带的一些功能以外，还有一些例如图片上传，字体颜色，背景颜色，插入表情等，需要安装相应的拓展插件才可以正常使用。

4、配置脚本文件

在src/js文件目录下，创建一个 config_file 脚本文件，代码如下：

/** * Created by 西兰花的春天 gcx 高 on 2017/1/12. * config_file for Trumbowyg,only use to this. * *============================================================================================================= */ /**   编辑器配置说明   Configuration instructions  **/ /**  * ==========   btnsGrps.test=[],内增加模块内容解释：===========  * bold:加粗  * link：链接  * formatting：格式化，排布大小方案  * btnGrp-semantic：字体的倾斜，加粗，中间划线  *justifyLeft：左对齐  *justifyCenter：居中  *justifyRight：右对齐  *justifyFull：两端对齐  *foreColor：字体颜色  *backColor：背景颜色  *  * ==========   btns: [],内增加模块内容解释：===========  * 每个模块中间用'|'隔开  *  * btnGrp-test,        //试验，有此项，则会出现左对齐，居中，右对齐，两端对齐  * viewHTML,            //转换成html格式  * formatting,         //格式化，排布大小方案  * btnGrp-semantic,    //字体的倾斜，加粗，中间划线  * btnGrp-lists,       //list，前面加序号或者圆点符号  * image,              //图片  * horizontalRule     //增加分隔符  *  * 其他参数：  * lang: 语言选择  * autogrow: true,   //当编写长文本时，文本编辑区可以自行扩展,不会出现下拉条，默认值是false  *  **///============================================================================================================= $.trumbowyg.btnsGrps.test = [   'blod',   'link',   '|', 'justifyLeft',   'justifyCenter',   'justifyRight',   'justifyFull','|',   'foreColor',   'backColor'];$( '#gcx_editor' ).trumbowyg( {   //设置中文   lang: 'zh_cn',   //最大化：   fixedBtnPane: true,   //autogrow: true,   //当编写长文本时，文本编辑区可以自行扩展,不会出现下拉条，默认值是false   //点击选择下拉   btnsDef: {      //图片      image: {         dropdown: [ 'insertImage', 'base64','upload' ],  // 'upload' 还有上传图片         ico: 'insertImage'      }   },   btns: [      'viewHTML',              //转换成html格式      '|', 'formatting',         //格式化，排布大小方案      '|', 'btnGrp-semantic',    //字体的倾斜，加粗，中间划线      '|', 'btnGrp-test',        //试验，有此项，则会出现左对齐，居中，右对齐，两端对齐      'btnGrp-lists',       //list，前面加序号或者圆点符号      '|', 'image',              //图片      '|', 'horizontalRule'     //增加分隔符   ]} );$.extend( true, $.trumbowyg.langs, {   fr: {      align: 'Alignement',      image: 'Image'   }} );//配置php文件，上传的路径修改$.extend( true, $.trumbowyg.upload, {   serverPath: './src/plugins/upload/trumbowyg_upload.php' /*服务器路径*/} );//=============================================================================================================/*  新增一個 button  作为  清空输入内容  */function editor_reset() {   $('#gcx_editor').trumbowyg('empty');  /*此方法为清空内容*/}

这里就不多解释了，上面已经很详细了，编辑器所需要的功能都可以自行增减。

5、upload插件配置

这里我们打开trumbowyg_upload.js，有这么一句：

upload: {   serverPath: './src/plugins/upload/trumbowyg.upload.php'},

这里我要用到 trumbowyg.upload.php 文件，所以正确填写路径，当然了也可以在配置文件里修改：

//配置php文件，上传的路径修改$.extend( true, $.trumbowyg.upload, {   serverPath: './src/plugins/upload/trumbowyg_upload.php' /*服务器路径*/} );

在你的项目文件里创建一个文件夹，作为上传图片的存档目录。我这里在根目录创建了一个 uploaded-files 文件

打开 trumbowyg.upload.php ，找到这句，修改相应的路径：

define("UPLOADDIR", "./../../../uploaded-files/");

6、结尾

上述全部完成后，打开控制台，在项目文件下输入：

grunt
生成相应文件后，在html里引用即可。

至此所有工作已经做完，你可以在本地服务器上运行此编辑器插件了。

0 0