首先废话就不多说，这个富文本编辑器的下载和js等基本文件的导入略。

　　我的最终目标是这样的，我们在页面中的富文本框中输入代码，希望它能够被后台接受、存入数据库，当通过服务器将这些代码再一次显示在前台的页面上的时候，我们希望所呈现的是如下的情况：

　　　　

　　就是说需要对代码的背景和高亮的部分的样式也进行保存。我的解决过程是这样的（假设在demo.html中进行输入，在demo.php中进行处理和呈现）：

　　1. 首先在网上查找相关信息，发现需要第三方插件，而这第三方插件就在我们的ueditor的下载包中，ueditor/third-party中便是。那么需要在demo.html中引入的就是

<script type="text/javascript" src="./Public/editor/third-party/SyntaxHighlighter/shCore.js"></script>

<link rel="stylesheet" type="text/css" href="./Public/editor/third-party/SyntaxHighlighter/shCoreDefault.css">

<script>SyntaxHighlighter.all();</script>

　　　　路径是我当前使用的路径，换成自己的就好。

　　　　另外有人说需要在editor下的ueditor.config.js中添加

　　　　　　,highlightJsUrl:URL + "third-party/SyntaxHighlighter/shCore.js"

　　　,highlightCssUrl:URL + "third-party/SyntaxHighlighter/shCoreDefault.css"

　　　　本人使用1.4.3.3版本，发现加入不加入这个配置都可以。

　　2.这个时候我感觉可以得到我想要的效果了，于是在demo.html中使用富文本，在其中输入了一行js代码，提交到demo.php中。直接输出，结果代码和背景的样式并没有呈现出来。此时的我已经很烦躁，查了半天网上的资料都没有找到想要的结果，因为几乎所有的信息都是一模一样的：出自一个人的手笔。。。。。最后我F12，发现最后在前台这些代码文字呈现的html为：

<pre class="brush:js;toolbar:false">var&nbsp;name&nbsp;&nbsp;=&nbsp;'jyy';

var&nbsp;age&nbsp;=&nbsp;26;

function&nbsp;say(){

&nbsp;&nbsp;&nbsp;&nbsp;console.log('my&nbsp;name&nbsp;is:'&nbsp;+&nbsp;name&nbsp;+&nbsp;'&nbsp;and&nbsp;age:'&nbsp;+&nbsp;age);

}</pre>

　　发现有很奇特的class，知道了可能我少了一道工序。没错，就是editor中的uparse。当时急于快速的搭建完成，于是没有仔细的看文档，知道了原来这些样式是需要uparse来进行解析的，这样才能在前台显示出应有的样式，uparse文件就是ueditor中的ueditor.parse.js,于是在demo.php中是这样的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="./Public/Admin/js/jquery.js"></script>

    <script src = './Public/editor/ueditor.parse.js'></script>

</head>

<body>

    <div id="con">

        <?php

            echo $_POST['content'];

        ?>

    </div>

    <script>

        $(function(){

            uParse('#con',{rootPath:'./Public/editor'});

        });

    </script>

</body>

</html>

　　注意在引入相应的js文件后，需要使用uParse()方法，参数1是代码文字的如元素的选择器，参数2是editor相对于demo.php的路径。

　　3、最后，大功告成。

Ueditor中代码的高亮和背景在前端页面的实现的更多相关文章

  1. 在java中构建json对象，返回给前端页面

    // 给客户端返回一个json对象 StringBuilder sb = new StringBuilder("{"); sb.append("\"name\& ...

  2. Android 代码编辑器中实现代码语法高亮

    想写一款Android手机上的代码编辑器,实现类似c4droid中代码语法高亮 通过Android中的控件WebView中嵌入html网页,html引入CodeMirror这个第三方库就可以了,其实就 ...

  3. C# 获取Word文本高亮和背景（附vb.net代码）

    Word中的文本高亮和背景是通过不同方法来设置的.文本高亮(Text Highlight Color)是通过[字体]中的快速工具栏设置:文本背景(Text Background/Shading)是通过 ...

  4. ueditor使用代码高亮的方法

    最近发现ueditor支持代码高亮,但是页面上并没有起效果,于是网上找了下,发现还需做如下修改: 1.页面引用以下资源文件(均位于ueditor目录中): <script type=" ...

  5. android中在java代码中设置Button按钮的背景颜色

    android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...

  6. 解决ueditor中没法动态配置imageurlprefix的方法

    [建议使用右边文章中的方法,本篇文章没有真正的解决问题](新)解决php版本ueditor中动态配置图片URL前缀(imageurlprefix)的方法 修改背景,由于后台图片是上传到挂载的静态资源磁 ...

  7. CUDA代码的高亮设置

    以下基于"WIN7(64位)+Visual Studio 2010+CUDA7.5". 语法高亮除了看起来舒服之外,还可以使用F11寻找函数.变量定义,输入函数的时候也会有相应的提 ...

  8. 从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  9. VS2015 安装mvc4安装包以及vs2010 sp1后导致Razor语法失效代码不高亮(能正常运行)/视图页面无法智能提示(.cshtml)解决办法

    VS2015默认asp.net mvc 版本为5.0以上,默认不支持创建5.0以下的版本.所以想要使用mvc 4.0只能单独安装.在网上搜了几篇教程后在微软官网下载了Visual Studio 201 ...

随机推荐

  1. JPA框架下使用纯粹的原生SQL

    最近遇到一个需求,查询数据库中对应表的字段是动态的,项目使用的框架使用JPA+Spring Boot,JPA自带原生SQL支持的传入参数是强类型的,无法用于查询语句的字段更改,因为插入字符串的话带有单 ...

  2. [NOIP1998] 提高组 洛谷P1012 拼数

    题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4时,4个整数7,13,4 ...

  3. 【POJ3254】Corn Fields（状压DP）

    题意: 一个M x N矩阵里有很多格子,每个格子有两种状态,可以放牧和不可以放牧,可以放牧用1表示,否则用0表示,在这块牧场放牛,要求两个相邻的方格不能同时放牛,即牛与牛不能相邻.问有多少种放牛方案( ...

  4. BZOJ4580: [Usaco2016 Open]248

    n<=248个数字,可以进行这样的操作:将相邻两个相同的数字合并成这个数字+1,求最大能合成多少. f(i,j)--区间i到j能合成的最大值,f(i,j)=max(f(i,k)+1),f(i,k ...

  5. IdHttp 资料

    http://blog.csdn.net/delphizhou/article/details/3085704 IdHttp 资料 网上找了些不过很不好找.今天找了些收藏在一起.以便他人查阅, idh ...

  6. django学习之- modelForm

    ModelForm(耦合很强) 可以实现 1:数据库操作 2:数据验证 使用地方:1:小型项目,2:自定制jdango admin 功能: 1:可以生成html标签:class Meta... 2:m ...

  7. FATE---hdu2159(二重背包)

    FATE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. 解决idea中启动tomcat出现控制台乱码问题

    尝试了很多方法,最后终于解决了,现在提供给大家一个我认为最简单也最有效的方案. 1.修改配置文件 找到idea的安装目录,在bin文件夹下找到以下两个文件,用记事本或者其他软件打开: 然后两个文件中都 ...

  9. 关于oracle存储过程的若干问题备忘

    1.在oracle中,数据表别名不能加as,如: select a.appname from appinfo a;-- 正确select a.appname from appinfo as a;-- ...

  10. ArcEngine读取ShapeFile时，出现乱码的解决方案

    ArcEngine读取ShapeFile时,如果用LicenseControl的话,字段中含有汉字时可以正常使用,当使用LicenseInitializer进行初始化时,读取含有汉字的字段时,就会出现 ...