简单介绍: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、你的编辑器保存的值取出显示到页面就可以了。

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

tinymce与prism代码高亮实现及汉化的配置的更多相关文章

  1. 原创教程:SpagoBI4.2汉化及配置Mysql数据库教程

    SpagoBI4.2汉化及配置Mysql数据库教程 商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的B ...

  2. JSLint JavaScript代码质量审查工具汉化中文版隆重发布

    JSLint是一款JavaScript代码质量审查工具,它可以指出代码中错误.不规范的地方,非常之严格,甚至多写一个空格都会发出警告. JSLint的审查规则,根据众多前辈多年编程经验而写,字字珠玑, ...

  3. sublime text3:下载代码格式化插件和汉化插件

    1.从官网下载sublime text3 2.下载插件工具 A.使用Ctrl+`(Esc键下方)快捷键或者通过View->Show Console菜单打开命令行 将以下代码复制后粘贴,然后按En ...

  4. Sublime Text 3下载-汉化-插件配置

    Sublime Text 3下载 不用说是上官方下载地址:http://www.sublimetext.com/3 Sublime Text 3 免费使用方法 Sublime Text 2的时候还有一 ...

  5. CentOS 7安装GitLab、汉化、配置邮件发送

    1.更换国内yum源 1.1 备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 1.2 ...

  6. Ubuntu 18.04 sublime text 3176 安装、汉化及配置中文输入

    转载自:https://blog.csdn.net/weixin_42508385/article/details/82152393 一.下载: 在https://www.sublimetext.co ...

  7. 2020kali浏览器汉化等配置

    0.修改搜索引擎 1. 2. 3.点击左侧搜索,输入language因为我已经修改为中文所以没有查询到结果 4点击搜索更多语言(未汉化未英文)找到chinese后添加 5.要将chinese上移到第一 ...

  8. 第四章:重构代码[学习Android Studio汉化教程]

    第四章 Refactoring Code The solutions you develop in Android Studio will not always follow a straight p ...

  9. Ubuntu16.04 Kdevelop汉化及配置

    关闭Kdevelop sudo apt-get install kdevelop-l10n 再打开. 字体选择 Sans Serif :style:Normal:这样更舒服且不影响中文的排版,如何改成 ...

随机推荐

  1. cursor: pin S产生原理及解决方法

    转自:http://www.dbafree.net/?p=778 今天晚上在一个比较重要的库上,CPU严重的冲了一下,导致DB响应变慢,大量应用连接timeout,紧接着LISTENER就挂了,连接数 ...

  2. VueRouter

    使用VueRouter的前提: 1, 必须导入vue-router.js文件    2, 要有VueRouter()实例    3, 要把VueRouter实例挂载到Vue实例中 4, 路由的入口   ...

  3. Xenu Link Sleuth 简单好用的链接测试工具 使用说明

    XenuLink Sleuth 名词介绍 “Xenu链接检测侦探”是被广泛使用的死链接检测工具.可以检测到网页中的普通链接.图片.框架.插件.背景.样式表.脚本和java程序中的链接. 那么神马时候出 ...

  4. leetcode219

    public class Solution { Dictionary<int, List<int>> dic = new Dictionary<int, List< ...

  5. python 把txt文件分隔成0.8和0.2的比例的新文件

    from math import sqrt import randomimport osfrom sklearn import cross_validation os.chdir("/*&q ...

  6. Spring Cloud Config配置中心的使用

    一.概述 1. 为什么使用? 1> 配置文件太多,不方便维护 2> 配置文件一般都保存这各种明文显示的密码,无法保证配置内容的安全性,也无法做到按权限分配给个人 3> 更新配置项目需 ...

  7. sed的基础应用

    sed是一个非交互式的文本编辑器:sed一行一行的处理文件 sed有模式空间(主要活动空间)和缓存空间(辅助空间)两个空间: 模式空间(pattern space)将文件中的一行内容读取到临时缓冲区( ...

  8. Spring中的AOP(五)——定义切入点和切入点指示符

    定义切入点 在前文(点击查看)中使用到的AdviceTest类中同一个切点(即* com.abc.service.*.advice*(..)匹配的连接点)却重复定义了多次,这显然不符合软件设计的原则, ...

  9. ForwardPriceSimulationService

    using System;using System.Collections.Generic;using System.Linq;using System.Text; using System.Coll ...

  10. jdbc注册驱动 class.forName()

    从源码 D:\Javasoftware\MySql\mysql\mysql-connector-java-5.1.7\src\com\mysql\jdbc\Driver.java class.forN ...