wangeditor Demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了wangeditor Demo相关的知识，希望对你有一定的参考价值。
<html> <head> <!--在这里字符集的设定很重要，如果设定不当将会出现乱码--> <meta charset="UTF-8"> <title>wangEditor demo</title> </head> <body> <!--wangEditor是一款基于jquery框架开发的插件--> <script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/lib/jquery-2.2.1.js"></script> <!--编辑器位置--> <div style="max-width:700px;margin:50px"> <div id="txtdiv" style="border:1px solid gray;min-height:240px"> </div> </div> <!--效果展示框--> <div id="show_box" style="border: 1px solid gray;margin-left:50px"></div> <!--脚本控制--> <script> $(function(){ //初始化编辑器 editor = new wangEditor("txtdiv"); editor.create(); //内容修改事件，此处做的是实时展示实际效果 editor.onchange = function(){ //获取editor的html值 var html = editor.$txt.html(); $("#show_box").html(html) } }) </script> <!--按照官网上的说明，js和css的这两个引用应该放在body的末尾--> <script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.js"></script> <link href="http://cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css" rel="stylesheet"> </body> </html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- body container -->
<div class="container">
<div style="max-width:1100px;">
<!--demo-->
<div style="text-align:left;">
<div id="divDemo"><p>欢迎使用<b>wangEditor 富文本编辑器</b>，请输入内容...</p></div>
</div><!--demo end-->
</div>
</div><!-- body container end -->
<script type="text/javascript" src=‘http://www.wangeditor.com/js/jquery-1.10.2.min.js‘></script>
<script type="text/javascript" src=‘http://www.wangeditor.com/bootstrap-3.3.0/js/bootstrap.min.js‘></script>
<script type="text/javascript" src=‘http://unpkg.com/wangeditor/release/wangEditor.min.js‘></script>
<script type="text/javascript" src=‘http://www.wangeditor.com/index.js‘></script>
</body>
</html>
http://www.wangeditor.com/
以上是关于wangeditor Demo的主要内容，如果未能解决你的问题，请参考以下文章
vue项目使用wangEditor使用代码高亮，背景无效的简单粗暴解决方法