本文作者:sushengmiyan 

本文地址:http://blog.csdn.net/sushengmiyan/article/details/47866905

上一节我们将开发环境搭建完成,我们会发现发布帖子的编辑器比较简单,格式支持比较少,现在我们将一个开源编辑器 ckeditor 替换。

1.下载ckeditor

http://ckeditor.com/ 免费的开源编辑器。

2.加入到我们项目中。

现在使用ckeditor特别简单,将下载到的包,解压到项目根目录,webroot下。然后在templates\default.htm文件中,头部加入如下引入js

<script src="${contextPath}/ckeditor/ckeditor.js"></script>

然后在约357行,标有teatarea注释的地方,嘎栋为如下:

<!-- Textarea -->
<tr>
<td valign="top">
<textarea name='editor1' id='editor1'class="message" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" tabindex="3" name="message" rows="15" cols="35"><#if post?exists><#if quote?exists>[quote=${quoteUser}]${post.text?html}[/quote]<#else>${post.text?html}</#if></#if></textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</td>
</tr>

重新刷新项目,新发布文章的时候,ckeditor已经在起作用了,如下图:



好的,到此,已经将编辑器纳入为我们的项目了。现在需要做的就是融合了,大家各显神通的时候到啦。

[BBS]搭建开源论坛之JForum富文本编辑器更换的更多相关文章

  1. [BBS]搭建开源论坛之JForum安装使用札记

    本文作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/47761303 目录 目录 BBS搭建开源论坛之JF ...

  2. [BBS]搭建开源论坛之Jforum搭配开源CKEDITOR

    本文作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/47946065 使用默认的编辑器的时候,格式都无法保 ...

  3. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

  4. Quill – 可以灵活自定义的开源的富文本编辑器

    Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...

  5. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  6. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

  7. 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)

    我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...

  8. 在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)

    研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内.我先给各位介绍下它: Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯 ...

  9. wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [LeetCode] Design Excel Sum Formula 设计Excel表格求和公式

    Your task is to design the basic function of Excel and implement the function of sum formula. Specif ...

  2. 前端小白想要编写可维护的js

    我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给 ...

  3. 【Swfit】Swift与OC两种语法写单例的区别

    Swift与OC两种语法写单例的区别 例如写一个NetworkTools的单例 (1)OC写单例 + (instancetype)sharedNetworkTools { static id inst ...

  4. Java多线程之生产者消费者

    生产者和消费者的实例: 商品类:/** * 商品类 * */public class Goods {    final int MAX_NUMBER = 30; // 最大数量    final in ...

  5. codefroces 946G Almost Increasing Array

    Description给你一个长度为$n$的序列$A$.现在准许你删除任意一个数,删除之后需要修改最小的次数使序列单调递增.问最小次数.$1≤n≤200000$ExamplesInput55 4 3 ...

  6. ●BZOJ 4237 稻草人

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4237 题解: CDQ分治,单调栈 把所有点先按x从小到大排序,然后去CDQ分治y坐标. 在分 ...

  7. 【LA3938】"Ray, Pass me the dishes!"

    原题链接 Description After doing Ray a great favor to collect sticks for Ray, Poor Neal becomes very hun ...

  8. 【LSGDOJ 2015】数页码

    题目描述 一本书的页码是从 1-n 编号的连续整数:1, 2, 3, ... , n.请你求出全部页码中所有单个数字的和,例如第 123 页,它的和就是 1+2+3=6. 输入 一行为 n(1 < ...

  9. hdu 5446(中国剩余+lucas+按位乘)

    题意:c( n, m)%M    M = P1 * P2 * ......* Pk Lucas定理是用来求 c(n,m) mod p,p为素数的值.得出一个存余数数组,在结合中国剩余定理求值 其中有个 ...

  10. hdu 4052 线段树扫描线、奇特处理

    Adding New Machine Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...