tinymce与prism代码高亮实现及汉化的配置

时间: 2018-08-01阅读: 1908标签: 代码

简单介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用,好了不多说,想了解更多自行百度,我们进入正题。


一、编辑页配置

1.首先我们需要引用网页样式控制文件及脚本语言编辑文件(其中前两个是tinymce脚本文件,后两个是prism高亮文件)

<script type="text/JavaScript" src="tinymce.min.js"></script>
<script type="text/javascript" src="jquery.tinymce.min.js"></script>
<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>


2.在body中设计好我们的文本

<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)赋值及设置值操作

var context=tinyMCE.activeEditor.getContent();//进行值得获取
tinyMCE.activeEditor.setContent("你的数据");//进行值得获取


二、展示页相关配置

1、引用网页样式控制文件及脚本语言编辑文件(两个高亮显示脚本)

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>


2、你的编辑器保存的值取出显示到页面就可以了。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/966

如何写出让同事无法维护的代码?

你的老板什么都知道。无论你的老板有多 SB,你都要严格地遵照他的旨意办事,这样一来,你会学到更多的知识以及如何写出更加无法维护的代码。颠覆Help Desk。你要确保你那满是 bug 的程序永远不要被维护团队知道

写业务代码最容易掉的8种坑

线程、线程同步、池、网络连接、网络链路、对象实例化、内存等方面的基础是最容易犯错的地方,搞清楚框架内部对于这些基础资源的的使用方式,根据最佳实践进行合理配置,这是业务开发时需要特别关注的点。

webpack优化之玩转代码分割和公共代码提取

开发多页应用的时候,如果不对webpack打包进行优化,当某个模块被多个入口模块引用时,它就会被打包多次(在最终打包出来的某几个文件里,它们都会有一份相同的代码)。当项目业务越来越复杂

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

怎么避免写出烂代码

命名规则:除非在小于 5 行的函数里,否则不要使用单字命名变量,规则:不要使用名词加数字的命名方法,规则:应该且只有方法和函数以动词开头

20个编写现代CSS代码的建议

不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习:

开发中比较容易理解的代码套路

举个栗子:我们有一些业务需要添加元素到数组中,但同时也可能过会又要将其移除。更好的方式是我们把他们封装成函数,并利用高阶函数闭包的特性来标记删除,这样就减少了去查找这个元素的问题了

提高代码质量的七大JavaScript优秀实践

自2015年以来,随着ECMAScript 6(简称ES6)的发布,每年都有新版本的ECMAScript规范面市。而每次迭代都为该语言添加新的功能、新的语法、以及新的质量改进。为此,大多数浏览器和Node.js中的JavaScript引擎都需要迎头赶上

看看这些被同事喷的JS代码风格你写过多少?

现在写代码比以前好多了,代码的格式都有eslint,prettier,babel(写新版语法)这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决

Js代码简洁之道

如果你关注代码本身和代码的编写方式,而不是只关心它是否能工作,那么你写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写当前能工作就行的代码。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!