Simditor实现查看“HTML源代码”扩展：simditor-html

今天用了一下Simditor编辑器，结果发现，Simditor工具栏上没有一个类似于“查看HTML源代码”这样有的功能，往往我们很多时候为了更好的控制富文本，可能需要查看甚至修改HTML源码。这个又应该如何实现呢？具体如下：

Simditor集成了很多的扩展，其中simditor-html就是官方扩展之一。我们可以完全用它来实现查看“HTML源代码”这个功能。最终的效果如下图：

simditor-html 使用教程

simditor-html拓展支持HTML源码编辑，使用js-beautify框架为HTML排版。

Simditor官方下载地址：https://simditor.tower.im/extension.html

Github下载地址：https://github.com/mycolorway/simditor-html

1、引入相关的核心文件

<script type="text/javascript" src="[path]/beautify-html.js"></script>
<script type="text/javascript" src="[path]/simditor-html.js"></script>

<link rel="stylesheet" href="[path]/simditor-html.css" media="screen" charset="utf-8" />

注意：

beautify-html.js需要去以下两个地方下载任意一个再引入：

https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.js

https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js

2、初始化Simditor时添加html按钮配置

<script>
var editor = new Simditor({
  textarea: $('#txt-editor'),
  toolbar: ['bold', 'italic', 'underline', 'color', '|', 'ol', 'ul', '|', 'html']
});
</script>

总结：

为了防止大家引入的文件有缺失或者是顺序有问题从而造成工具栏图标不显示的情况。因此，再给大家看一下我引入的文件，这些都是必须要引入的：

    <link rel="stylesheet" type="text/css" href="/admin/simditor/simditor.css?x61917" />

    <script type="text/javascript" src="/admin/js/jquery.min.js?x61917"></script>

    <script type="text/javascript" src="/admin/simditor/module.js?x61917"></script>
    <script type="text/javascript" src="/admin/simditor/hotkeys.js?x61917"></script>
    <script type="text/javascript" src="/admin/simditor/uploader.js?x61917"></script>
    <script type="text/javascript" src="/admin/simditor/simditor.js?x61917"></script>

    <script type="text/javascript" src="/admin/simditor/js-beautify/beautify-html.min.js?x61917"></script>
    <script type="text/javascript" src="/admin/simditor/simditor-html/simditor-html.js?x61917"></script>
    <link rel="stylesheet" href="/admin/simditor/simditor-html/simditor-html.css?x61917" media="screen" charset="utf-8" />