起因是我们在做爱学啊官方网站的时候，要用到富文本的地方有电子书页面，文章页面，所以就要用到富文本编辑，调研了一圈就选用了Tower开源的Simditor编辑器，各方方面都还不错基本上没有什么大的Bug，主要是他原来上传图片需要服务端配合，但是现在大部分情况下都是将图片这类资源托管的到第三方，所以我们这里修改了他的源码，支持直接将图片上传到阿里云。但有了富文本，贴别是 里面贴代码，如果不高亮总感觉死气成成的，感觉先不说代码内容这么样，要格式不好看就没有灵魂，最后实在不能忍所以就到处寻找发现用的最多的highlight.js，但是他所支持的格式是：
<pre>
<code class="java">
</code>
</pre>
而Simditor默认编辑出来的代码块是： 也就是说highlight.js支持的是没有前缀的，这里也说不上谁对谁错，毕竟Simditor也是按照H5规范来的，而highlight.js可能由于年代久远，那时候还没这规范，所以就这样实现的，但是好像在highlight.js官网看到所可以设置前缀，不过没找到；接着就想的是更改Simditor源代码，但更改后升级就不太好升级了，接着想的是更改highlight.js源码，查看一番后发现没太看懂，也挺麻烦，所以这个需求就一直搁置了，直到有一天知道PrismJS然后就是这加进来的，占时没有发现什么大的问题，所以就在做一个记录也帮助到需要的人。
下载PrismJS
来到PrismJS官网，可以发现在首页他就占时了几个主题的切换按钮，下面就相应的效果，我们这里选用的是默认主题。来到PrismJS下载页面：
第一步：选择下载的版本是开发版本，还是压缩版本。
第二步：选择主题。
第三步：选择需要的语言，如果你第一次集成，建议你选择默认的语言，先下载下来集成到项目中，确认没问题，能实现需求，然后在选择语言。
第四步：选择插件，我们这里没有选用。
下载完成后得到两个文件：
prism.css，prism.js
在网页中引入资源 现在就可以在网页中引入这个两个资源，js建议在body内容后面引入，例如这样：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./prism.css">
</head>
<body>
<pre><code class="lang-java">private void showCommentMoreDialog(final Comment data) {
CommentMoreDialogFragment dialogFragment = new CommentMoreDialogFragment();
dialogFragment.show(getSupportFragmentManager(), new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
processOnClick(which, data);
}
});
}
</code></pre>
<!-- 引入js，该js内部处理了，也就是说在head中引入也是没问题的 -->
<script type="text/javascript" src="./prism.js"></script>
</body>
</html>
效果如下图：
可以看到差不多，没有什么大问题。基本使用到这里就完成，如果你需要手动高亮，也就是说不让加载完js就高亮，那么你需要这样导入js：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./prism.css">
</head>
<body>
<pre><code class="lang-java">private void showCommentMoreDialog(final Comment data) {
CommentMoreDialogFragment dialogFragment = new CommentMoreDialogFragment();
dialogFragment.show(getSupportFragmentManager(), new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
processOnClick(which, data);
}
});
}
</code></pre>
<!-- 引入js，该js内部处理了，也就是说在head中引入也是没问题的 -->
<script type="text/javascript" src="./prism.js" data-manual></script>
<script type="text/javascript">
//然后在需要的位置调用如下方法
Prism.highlightAll();
</script>
</body>
</html>
显示效果和上面一样。
Simditor增加更多语言 默认情况下Simditor大概就10多种语言，所以说可能不够用，比如：Groovy，Go，Swift，Kotlin就没有，所以说这不能忍，就需要修改，另外还有个问题是，好像部分语言他们的命名还不一样，我们这里就统一修改成了PrismJS的命令，修改的方法也很简单：
修改simditor.js中的this.langs = this.editor.opts.codeLanguages属性。
我这里修改完成后的代码如下，大概有40中语言，大家拿去直接就可以放到你的源码中就行了：
this.langs = this.editor.opts.codeLanguages || [
{
name: 'ASP.NET',
value: 'aspnet'
},
{
name: 'Bash',
value: 'bash'
},{
name: 'Basic',
value: 'basic'
}, {
name: 'C',
value: 'c'
}, {
name: 'CoffeeScript',
value: 'coffeescript'
}, {
name: 'C++',
value: 'c++'
}, {
name: 'C#',
value: 'csharp'
}, {
name: 'CSS',
value: 'css'
}, {
name: 'Diff',
value: 'diff'
}, {
name: 'Erlang',
value: 'erlang'
}, {
name: 'Go',
value: 'go'
}, {
name: 'Groovy',
value: 'groovy'
}, {
name: 'HTML,XML',
value: 'html'
}, {
name: 'Java',
value: 'java'
}, {
name: 'JavaScript',
value: 'js'
}, {
name: 'JSON',
value: 'json'
}, {
name: 'Kotlin',
value: 'kotlin'
}, {
name: 'Less',
value: 'less'
}, {
name: 'Lisp',
value: 'lisp'
}, {
name: 'Lua',
value: 'lua'
}, {
name: 'Markdown',
value: 'markdown'
}, {
name: 'Markup',
value: 'markup'
}, {
name: 'Matlab',
value: 'matlab'
}, {
name: 'Objective C',
value: 'objectivec'
}, {
name: 'Perl',
value: 'parl'
}, {
name: 'PHP',
value: 'php'
}, {
name: 'PL/SQL',
value: 'plsql'
}, {
name: 'PowerShell',
value: 'powershell'
}, {
name: 'Python',
value: 'python'
}, {
name: 'R',
value: 'r'
}, {
name: 'Ruby',
value: 'ruby'
}, {
name: 'Rust',
value: 'rust'
}, {
name: 'Scala',
value: 'scala'
}, {
name: 'Sass',
value: 'sass'
}, {
name: 'Scss',
value: 'scss'
}, {
name: 'SQL',
value: 'sql'
}, {
name: 'Swift',
value: 'swift'
}, {
name: 'TypeScript',
value: 'typescript'
}, {
name: 'VB.NET',
value: 'vbnet'
}, {
name: 'VisualBasic',
value: 'visual-basic'
}, {
name: 'Yaml',
value: 'yaml'
}
];
修改完成后，在选择语言的时候就改变了。
关于Simditor的问题 感觉Simditor还有一些问题，不知道大家是如何解决的，建议大家收藏这篇文章(只有官方才会更新)，后面如果解决的相应的问题会在更新的。
-
有时候从编辑器中直接复制源码到编辑中，有些换行符没有了，临时解决办法就是先粘贴到文本编辑器，然后在复制。
-
撤销感觉不太好使。
-
有时选中一段文字，再粘贴会粘贴到编辑器最前面。
