`

bootstrap-wysiwyg初识

    博客分类:
  • html
 
阅读更多
bootstrap-wysiwyg是bootstrap官方推荐的富文本编辑器http://www.bootcss.com/p/bootstrap-wysiwyg/

提供了简单的文档编辑功能,稍微强大的就是图片上传处理。具体实现详读bootstrap-wysiwyg.js
需要注意的:
[list]
  • 没有保存功能,用户需自己实现。以下代码是我写的一个简单保存功能
  • <a class="btn" data-save="save" title="save"><i class="icon-save"></i></a>

    $('#editor').wysiwyg({ fileUploadError: showErrorAlert, textSave: saveMaxim} );
    function saveMaxim() {...}
    bindToolbar = function (toolbar, options) {
    ...
    toolbar.find('a[data-save]').click(function () {
    					options.textSave();
    				});
    }
    
  • 编辑内容含html标签会保存到数据库中。页面访问时,保存的特殊字符如<会转义为&lt;,需要在页面响应处理时取消转义功能。jsp中escapeXml="false";django中{{content|safe}}
  • [/list]
    分享到:
    评论

    相关推荐

      bootstrap-wysiwyg.js

      bootstrap-wysiwyg.jsbootstrap-wysiwyg.js

      bootstrap-wysiwyg.min.js

      富文本编辑器bootstrap-wysiwyg.min.js。可以充分发挥编辑器的优势

      BootStrap-wysiwygt和bootstrap-wysihtml5

      Bootstrap-wysiwyg是一个轻量级的解决方案,它不依赖于任何大型的JavaScript库,而是直接利用jQuery进行操作。这个编辑器的特点在于其简洁的API和自定义事件,使得开发者可以轻松地将其集成到项目中。它提供了基本的...

      swagger-bootstrap-ui-1.9.6-API文档-中文版.zip

      赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...

      bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

      这些文件通常包括Bootstrap的核心库、jQuery、bootstrap-table主文件,以及bootstrap-table-editable.js。确保这些资源被正确地链接或导入到HTML文档的`&lt;head&gt;`部分,以便在页面加载时可以正常使用。 以下是一个...

      bootstrap-editable.zip

      可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...

      bootstrap-table实现 行拖拽 插件jquery.tablednd.js bootstrap-table-reorder-rows.js

      bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css

      bootstrap3-wysiwyg-0.3.3.zip

      Bootstrap3-wysiwyg-0.3.3.zip是一个包含富文本编辑器组件的压缩包,主要用于网页开发,便于用户在网页上创建和编辑复杂的文本内容。这个编辑器是基于Bootstrap 3框架构建的,因此它具有良好的响应式设计,能够适应...

      django-bootstrap-wysiwyg:django应用程式,可让您轻松整合`bootstrap-wysiwyg`

      这个django应用程式在应用程式中使用bootstrap-wysiwyg编辑器。 它提供了一个表单小部件,可以轻松地将编辑器集成到您的表单中。 该小部件包含一些内联JavaScript,我计划在以后的版本中对此进行修复。 需要注意的...

      bootstrap-table-editable.js+bootstrap-editable.js+bootstrap-editable.css

      压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑

      bootstrap-table-export.js bootstrap-table表格导出js

      bootstrap-table-export.js bootstrap-table表格导出js

      bootstrap-datetimepicker-简单好用的日历时间插件

      bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...

      bootstrap-table-pagejump.zip

      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"&gt; &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.3/dist/bootstrap-table....

      BootStrap-table.js 官网下载

      Bootstrap-table.js 是一个基于Bootstrap框架的前端数据展示插件,它允许用户在网页上创建功能丰富的、可操作的表格。这个插件的核心理念是提供一个简单而强大的方式来展示动态数据,同时保持良好的用户体验和响应式...

      bootstrap-table-fixed-columns(css,js)

      这个项目的扩展`bootstrap-table-fixed-columns`专注于解决在大表格中固定首列或首行的问题,使得在滚动时这些重要列始终保持可见,提高用户在浏览长表格时的可读性和交互性。在网页设计中,尤其是在数据密集型应用...

      极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg

      【bootstrap-wysiwyg编辑器】是一款轻量级的可视化编辑器,专为网页开发者设计。它基于Bootstrap框架,提供了一系列实用的功能,如热键绑定、拖拽图片上传、语音识别输入(仅限Chrome),以及自定义工具条等。这款...

      bootstrap-table-fixed-columns-v1.0.2.zip

      FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...

      bootstrap-datepicker-1.9.0_bootstrap源码_

      在本资源中,我们关注的是`bootstrap-datepicker-1.9.0`,这是一个针对Bootstrap框架的日期选择器插件。这个插件允许用户以美观、易用的方式选择日期,常见于各种表单输入和日历应用。 Bootstrap Datepicker是基于...

      mindmup-bootstrap-wysiwyg.zip

      至于压缩包中的“mindmup-bootstrap-wysiwyg”文件,这很可能是编辑器的源码目录,包括HTML、CSS、JavaScript文件,以及可能的示例和文档。开发者可以查阅这个目录来了解编辑器的内部工作原理,学习如何进行二次开发...

      bootstrap-table后端分页功能完整实例

      本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/...

    Global site tag (gtag.js) - Google Analytics