热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:tinymce与prism代码高亮实现及汉化的配置

本文由编程笔记#小编为大家整理,主要介绍了tinymce与prism代码高亮实现及汉化的配置相关的知识,希望对你有一定的参考价值。简单介绍:T
本文由编程笔记#小编为大家整理,主要介绍了tinymce与prism代码高亮实现及汉化的配置相关的知识,希望对你有一定的参考价值。


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

一、编辑页配置

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


1
2
3 "prism.css" rel="stylesheet" />
4

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


1

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‘语言本身默认英文,这里指定语言为中文


1

另外当我们用codesample进行插入会产生技术分享图片class=“language-**”标签,这个一眼看去和prism高亮显示插件是迎合的,也表示官方的支持。所以我们使用prism作为代码高亮插件。

(4)赋值及设置值操作


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

二、展示页相关配置

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


1 "prism.css" rel="stylesheet" />
2

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

源码demo:https://download.csdn.net/download/silverbutter/10557703


推荐阅读
  • 本文探讨了Android系统中联系人数据库的设计,特别是AbstractContactsProvider类的作用与实现。文章提供了对源代码的详细分析,并解释了该类如何支持跨数据库操作及事务处理。源代码可从官方Android网站下载。 ... [详细]
  • 本文介绍了一个基本的同步Socket程序,演示了如何实现客户端与服务器之间的简单消息传递。此外,文章还概述了Socket的基本工作流程,并计划在未来探讨同步与异步Socket的区别。 ... [详细]
  • 深入解析轻量级数据库 SQL Server Express LocalDB
    本文详细介绍了 SQL Server Express LocalDB,这是一种轻量级的本地 T-SQL 数据库解决方案,特别适合开发环境使用。文章还探讨了 LocalDB 与其他轻量级数据库的对比,并提供了安装和连接 LocalDB 的步骤。 ... [详细]
  • 构建Python自助式数据查询系统
    在现代数据密集型环境中,业务团队频繁需要从数据库中提取特定信息。为了提高效率并减少IT部门的工作负担,本文探讨了一种利用Python语言实现的自助数据查询工具的设计与实现。 ... [详细]
  • 本文介绍了进程的基本概念及其在操作系统中的重要性,探讨了进程与程序的区别,以及如何通过多进程实现并发和并行。文章还详细讲解了Python中的multiprocessing模块,包括Process类的使用方法、进程间的同步与异步调用、阻塞与非阻塞操作,并通过实例演示了进程池的应用。 ... [详细]
  • 本文介绍了一个实用的工具类 `ListExtensions`,提供了多种针对 `List` 的扩展方法,包括无序和有序列表中的对象检索及计数功能。 ... [详细]
  • iOS 小组件开发指南
    本文详细介绍了iOS小部件(Widget)的开发流程,从环境搭建、证书配置到业务逻辑实现,提供了一系列实用的技术指导与代码示例。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • 本文详细介绍了如何将After Effects中的动画相机数据导入到Vizrt系统中,提供了一种有效的解决方案,适用于需要在广播级图形制作中使用AE动画的专业人士。 ... [详细]
  • 如何检测用户是否正在文本输入框中进行编辑,并在用户按下回车键时触发特定函数?本文将介绍一种利用JavaScript实现的方法。 ... [详细]
  • 本文介绍了两个重要的Node.js库——cache-content-type和mime-types,它们在处理HTTP响应头时非常有用。cache-content-type是基于mime-types构建的,并且实现了缓存机制以提高性能。 ... [详细]
  • 本文详细介绍了Golang中string类型的内部结构及其特性,包括字符串的定义、表示方式、数据结构以及相关的操作方法,如字符串拼接和类型转换等。 ... [详细]
  • 本文将详细探讨MySQL中较为特殊的三种数据类型:SQLTEXT、DATE以及SET,包括它们的基本用法、适用场景及一些高级特性。 ... [详细]
  • Java实现实时更新的日期与时间显示
    本文介绍了如何使用Java编程语言来创建一个能够实时更新显示系统当前日期和时间的小程序。通过使用Swing库中的组件和定时器功能,可以实现界面友好且功能强大的时间显示应用。 ... [详细]
  • 前端技术分享——利用Canvas绘制鼠标轨迹
    作为一名前端开发者,我已经积累了Vue、React、正则表达式、算法以及小程序等方面的技能,但Canvas一直是我的盲区。因此,我在2018年为自己设定了一个新的学习目标:掌握Canvas,特别是如何使用它来创建CSS3难以实现的动态效果。 ... [详细]
author-avatar
天蝎丿冷傲丨
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有