可视化编辑器-bootstrap-wysiwyg

最新推荐文章于 2025-08-18 11:03:39 发布

原创最新推荐文章于 2025-08-18 11:03:39 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #可视化 #编辑器 #bootstrap

js 同时被 2 个专栏收录

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文详细介绍了如何使用bootstrap相关的一款基于jquery和bootstrap的可视化编辑器进行html页面编辑，包括其小巧的文件容量、操作简便性及个性化设置等优点。文中还提供了关键的css和js文件导入指南，并展示了最终的界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为使用的是bootstrap搭建的html,所以在考虑多方面的因素后,还是选择了使用bootstrap相关的一款wysiwyg基于jquery和bootstrap的可视化编辑器.这个编辑器很小巧.从github上面clone下来的全部文件也才300k不到的容量.期间比较过一些其他的编辑器,比如xhedit还有百度的ueditor以及markitup感觉还是wysiwyg这款要好操作一些.

wysiwg搭建可视化编辑器只需要定义一些div,而编辑部分只需要一个id为editor的div即可搞定.但是由于编辑器并没有做封装所以工具按钮什么的都需要自己来弄,而也正是这样才能保证了这个编辑器的多样化.正如官网所说的it's all up to you

使用插件需要在html中导入以下文件

<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css"/>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-wysiwyg.js"></script>

font-awesome.css是插件的字体图标替换.bootstrap-wysiwyg.js是主要的js文件

加入以上的文件后还需要将官网下载的font文件夹添加到css的../的目录下,当然也可直接修改css文件的路径最方便的是直接添加网路cdn的路径http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css

给出官方的git:bootstrap-wysiwyg

本地使用font-awesome.css需要到font-awesome的git上下载字体库

blog的write界面最终效果如下