tinymce与prism实现高亮的代码以及汉化的配置办法历程
简便介绍：TinyMCE是一个轻量级的基于阅读器的所见即所得编纂器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支撑。功效方强大，并且功效配置灵敏简便。另一特点是加载速度非常快的。最重要的是，TinyMCE是一个按照LGPL license公布的自在软件，你可以把它用于商业利用，好了不多说，想理解更多自行baidu，我们进入正题。
一、编纂页配置
1.第一我们需要援用网页样式操纵文件及足本说话编纂文件（其中前两个是tinymce足本文件，后两个是prism高亮文件）
1 <script type="text/javascript" src="tinymce.min.js"></script> 2 <script type="text/javascript" src="jquery.tinymce.min.js"></script> 3 <link href="prism.css" rel="stylesheet" /> 4 <script src="prism.js"></script>
2.在body中设计好我们的文本
1 <textarea name="content" style="width:100%"></textarea>
3.在js中停止文本的初始化
（1）tinymce.init配置并初始化tinymce
（2）selector: "textarea"按照你的选中器来指定，我这里是textarea，可以绑定id（#···）或class（.····）
（3）plugins填写要使用的插件名称
（4）toolbar设定工具栏指定显示插件，这里我展现了三个工具栏
（5）menubar禁用菜单栏模板
（6）toolbar_items_size工具栏标签大小设定为小
（7）style_formats初始化的默许样式，这个按照本人喜欢调理
（8）templates模板，toolbar3中的template选中标题后主动追加值content到文本框
（9）language:'zh_CN'说话本身默许英文，这里指定说话为中文
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor codesample"
],
toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
],
language:'zh_CN'
});</script>别的当我们用codesample停止插入会发生
class=“language-**”标签，这个一眼看去和prism高亮显示插件是逢迎的，也表示官方的支撑。所以我们使用prism作为代码高亮插件。
（4）赋值及设定值操纵
1 var context=tinyMCE.activeEditor.getContent();//停止值得猎取
2
3 tinyMCE.activeEditor.setContent("你的数据");//停止值得猎取二、展现页相关配置
1、援用网页样式操纵文件及足本说话编纂文件（两个高亮显示足本）
1 <link href="prism.css" rel="stylesheet" /> 2 <script src="prism.js"></script>
2、你的编纂器留存的值取出显示到页面就可以了。
相关引荐：
怎样来简述html的根本构造（附代码）
HTML构造元素是啥？HTML中各种构造元素的总结（纯文本）
以上就是tinymce与prism实现高亮的代码乃至汉化的配置办法历程的具体内容，更多请关注百分百源码网其它相关文章！
