ueditor 编辑器增加css样式_百度编辑器(ueditor)添加自定义代码语言格式-程序员宅基地

技术标签: ueditor 编辑器增加css样式  

ueditor编辑器中有代码语言支持的功能但有时我们后台使用代码语言把代码加上标签后前端显示的时候可能为用另一个js语言根据pre标签中的语言来显示代码,这个时候就需要在后台自定义一些代码标签标识啦

如:我想添加一个

 这样的代码这样到前端的时候我就可以根据我自己的需要来格式化并运行代码

下面记下修改方法

打开路径 \ueditor\lang\zh-cn\zh-cn.js

在这个文件中搜索 insertcode   应该是第二个结果找到如图所示代码,在最下面添加上 'runcode':'runCode' 就可以'insertcode':{

'as3':'ActionScript 3',

'bash':'Bash/Shell',

'cpp':'C/C++',

'css':'CSS',

'cf':'ColdFusion',

'c#':'C#',

'delphi':'Delphi',

'diff':'Diff',

'erlang':'Erlang',

'groovy':'Groovy',

'html': 'HTML',

'html': 'HTML无调试',

'java': 'Java',

'jfx':'JavaFX',

'js':'JavaScript',

'pl':'Perl',

'php':'PHP',

'plain':'Plain Text',

'ps':'PowerShell',

'python':'Python',

'ruby':'Ruby',

'scala':'Scala',

'sql':'SQL',

'vb':'Visual Basic',

'xml':'XML'

},

另外还有一个地方要修改 ueditor/ueditor.all.js

在这个文件中搜索 UE.plugins['insertcode'] 找到跟上面类似的代码在最下面添加上一样的自定义代码UE.plugins['insertcode'] = function() {

var me = this;

me.ready(function(){

utils.cssRule('pre', 'pre{margin:.5em 0;padding:.4em .6em;border-radius:8px;background:#333333;color: #fff;}',

me.document)

});

me.setOpt('insertcode',{

'as3':'ActionScript3',

'bash':'Bash/Shell',

'cpp':'C/C++',

'css':'Css',

'cf':'CodeFunction',

'c#':'C#',

'delphi':'Delphi',

'diff':'Diff',

'erlang':'Erlang',

'groovy':'Groovy',

'html': 'Html',

'html': 'HTML无调试',

'java': 'Java',

'jfx':'JavaFx',

'js':'Javascript',

'pl':'Perl',

'php':'Php',

'plain':'Plain Text',

'ps':'PowerShell',

'python':'Python',

'ruby':'Ruby',

'scala':'Scala',

'sql':'Sql',

'vb':'Vb',

'xml':'Xml'

});

....

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42512933/article/details/112045018

智能推荐

计算机同步与异步的概念,同步与异步到底是什么???-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏4次。总得来说,同步异步出现在以下几个领域:1 计算机网络。数据通信技术中有同步通信与异步通信。同步通信简单的说就是你在发送数据时候我必须同时接受。这个过程有精确的时钟控制。而异步通信是你在发数据时候必须加上开始与结束符号,这样我才可以接受,异步通信没有时钟控制。因为没有了时钟的控制(额外硬件),所以成本低,设备简单,但是传输效率较低。(开始与结束符占了开销)。在网络协议(network protoc..._计算机里的同步和异步

细谈JavaWeb中的Request和Response_java request control和request区别-程序员宅基地

文章浏览阅读6.6k次,点赞31次,收藏30次。request是代表HTTP请求信息的对象,response是代表HTTP响应信息的对象。当浏览器发请求访问服务器中的某一个Servlet时,服务器将会调用Servlet中的service方法来处理请求。在调用service方法之前会创建出request和response对象。其中request对象中封装了浏览器发送给服务器的请求信息(请求行、请求头、请求实体等),response对象中将会封装服务器要发送给浏览器的响应信息(状态行、响应头、响应实体),在service方法执行完后,服务器再将res_java request control和request区别

Android dependency 'com.android.support:support-v4' has different version for the compile (25.2.0)-程序员宅基地

文章浏览阅读3.1k次。错误原因是出现导入的第三方库中的包和 现有的包版本冲突 或者重复解决如下删除重复的包在gradle中排除版本冲突 exclude module 冲突的包 api ("com.alibaba:arouter-api:$rootProject.arouterVersion") { exclude module: 'support-v4' }..._android dependency 'com.android.support:support-v4' has different version fo

【数据结构】C语言实现单链表基本操作_设立尾指针的单循环链表的十二个基本操作c语言要有菜单-程序员宅基地

文章浏览阅读2.9k次,点赞13次,收藏121次。#include <stdio.h>#include <stdlib.h>#define OK 1#define ERROR 0#define TRUE 1#define FALSE 0typedef int Status;typedef int ElemType;//单链表的存储结构typedef struct LNode{ ElemType data; struct LNode *next; //next指向自身类型struct LNode *的指_设立尾指针的单循环链表的十二个基本操作c语言要有菜单

Linux 多线程编程使用pthread_creat()函数条件-程序员宅基地

文章浏览阅读467次。1.包含头文件2.编译时命令使用gcc -o xthread xthead.c -lpthread或者 gcc -lphread xthread.c -o xthread

apt-get安装指定php版本,Ubuntu中怎么使用apt-get安装指定php版本号_网站服务器运行维护,Ubuntu...-程序员宅基地

文章浏览阅读128次。linux是什么系统_网站服务器运行维护Linuxjavascript:;,全称GNU/Linux,是一套免费使用和自由传播的类UNIX操作系统,它主要受到Minix和Unix思想的启发,是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。Ubuntu中怎么使用apt-get安装指定php版本号命令用法如下:sudo apt-get install package=ve...

随便推点

Webug靶场之旅——显错注入-程序员宅基地

文章浏览阅读742次,点赞2次,收藏2次。显错注入显错注入是SQL注入的一种,而SQL注入是指web应用程序对用户输入数据的合法性没有判断,导致攻击者可以构造不同的sql语句来实现对数据库的操作。SQL注入漏洞产生的条件: 1、用户能够控制数据的输入。 2、原本执行需要执行的代码时,拼接了用户的输入。打开webug靶场,打开id为1的靶场后,如图:这里我们使用工具的是Hackbar2.1.3版本,这个是免费的。首先,我们需要判断是否存在SQL注入。在参数后面多加一个单引号,然后将它上传,发现报错了通过页面的返回结果,_webug靶场

AD辅域控制器升级为主域控制器(图形界面操作)_升级域控-程序员宅基地

文章浏览阅读3.5w次,点赞23次,收藏139次。环境介绍Active Directory域控制器已经搭建好主域控和辅域控,主域控故障,手动升级辅域控为主。主域控:2012DC1,ip:192.168.15.1辅域控:2012DC2,ip:192.168.15.21、升级前分别在2012dc1和2012dc2上查询fsmo的归属2、在2012dc1上,打开AD用户和计算机,更改连接的域控制器3、选择20..._升级域控

(一)Spring-Cloud源码分析之核心流程关系及springcloud与springboot包区别(新)_spring cloud 源码-程序员宅基地

文章浏览阅读1k次,点赞3次,收藏4次。很多人搞不懂springboot和spring-cloud的关系到底是什么,也不知道这两者时间有什么区别,今天简单的聊聊。2022年发了一篇Springcloud和Springboot的区别对比,但后面回看总觉得少了点东西,这次重新发个补充一下。_spring cloud 源码

Nuxt中关于window or document is not defined的问题总结-程序员宅基地

文章浏览阅读1.2w次,点赞2次,收藏5次。关于这类问题一般有两种场景引用第三方组价时,比如引用vue-awesome-swiper这种的第三方组件时,因为源组件代码中包含有操作window对象,所以这一类的window is not defined按照官方的使用插件的方法引入就可以解决// 这里就以vue-awesome-swiper这个组件为例import Vue from 'vue'import VueAwesomeSwi...

十.正确理解配置管理_配置项管理和受控状态解释-程序员宅基地

文章浏览阅读1.2k次。如何正确理解配置管理 在实际项目工作中,我们能回答项目组中不同角色人员提出的问题吗?  项目经理:还有没有重要性为1的请求没有解决?  分析设计人员:这次发布版本是否包括了462需求?  开发人员:我记得的确修改了那个文件的,为什么还会出现这个问题?  集成人员:为什么这次build失败了?  测试人员:Bug 873是否在这次build中fix了?  ……  实际情况是,我们很难_配置项管理和受控状态解释

函数的应用,七段电子数码管-程序员宅基地

文章浏览阅读38次。因为"%Y年%m月%d日%H时%M分%S秒" 并不会使文字显现在屏幕上 t.write('年',font=('Arial',25,'normal')等才能write文字。通过代码的编写输出从电脑获取的本地时间包括年月日。设置画布画笔的参数将中文年月日通过。代码运行后可以成功显示数字0-9。根据数码管的明暗条件编写程序。

推荐文章

热门文章

相关标签