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

更新日期: 2018-08-01阅读量: 2163标签: 代码

简单介绍: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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

如何写出优美的javascript代码?

在多年以前,人们注重功能是如何实现的。现如今,随着Web及互联网技术的不断发展,功能仅成了最基本的要求,如何写出漂亮,整洁的代码已成为一个大牛级程序员不可或缺的条件。

怎样使你的 JavaScript 代码简单易读

解决一个问题可以有很多方法,但是有些方法很复杂,甚至有些是荒谬的。在本文中,我想谈谈解决一个问题时的好方案和坏方案。

掌握依赖注入5大原则,无需额外编代码!

如果是第一次接触这个概念,可能会一时没有头绪,网上的各种解释可能会让你更加混乱,并觉得它没那么简单。 其实依赖注入本身是单纯、简单的。简单来说,依赖注入是一种方式、方法或者说手段

什么才是优秀的代码?

究竟什么是优秀的代码?Robert Martin的一句话可以完美诠释。代码质量的唯一衡量标准是每分钟说多少次WTF,我来解释一下这句话。当我在做code review时,通常会有三种不同的感受:

优秀的程序员要学会少敲代码,多思考!

如果只把一个字符一个字符地敲代码叫做 Coding,未免悲哀了一点。优秀的项目,编码阶段实际敲代码的时间不会很长;优秀的程序员,大部分时间都用来思考了。这个时候,你就需要学会代码评审,什么?

怎么样才能不写出别人嘴里的烂代码?

每个人对于好的代码在自己不同的时期都有不一样的理解。当个人所在的层次变化,好代码的概念也会跟着变化。老夫上手就是复制粘贴,别跟我说什么编码规范,设计模式。

编写优秀CSS代码的8个策略

编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。

被劣质代码“残害”的这些年

都已经 2020 年了,但我们仍然在生产劣质软件。自从计算机诞生以来,已经过去了近 70 年,但我们似乎还没有吸取所有的教训,仍然在犯着重复的错误。

32个JavaScript工作中常用的代码片段

初衷: 整理一下工作中常用的JavaScript小技巧分享给大家,希望能帮助到各位小伙伴们,在工作中提升开发效率。适合人群: 前端初级开发,大佬绕道。

点击更多...

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