本文作者: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. R语言-ggplot初级

    ggplot2简介: 在2005年开始出现,吸取了基础绘图系统和lattice绘图系统的优点,并利用一个强大的模型来对其进行改进,这一模型基于之前所述的一系列准则, 能够创建任意类型的统计图形 1.导 ...

  2. MySQL之SQL语句的优化

    仅供自己学习 结论写在前面: 1.尽量避免进行全表扫描,可以给where和order by涉及的列上建立索引 2.尽量在where子句中使用 !=或<>操作符,因为这样会导致引擎放弃索引而 ...

  3. 一日一练-CSS CSS中percentage百分值的使用

    子曰:学好百分值,考试考百分 首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计. 定位(Positioning ...

  4. 初探Javascript之DOM

    DOM对象(文档对象模型) HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML).HTML DOM 定义了用于 HT ...

  5. Java网络编程基础(Netty预备知识)

    今天在家休息,闲来无事,写篇博客,陶冶下情操~~~ =================我是分割线================ 最近在重新学习Java网络编程基础,以便后续进行Netty的学习. 整 ...

  6. [LeetCode] Bold Words in String 字符串中的加粗单词

    Given a set of keywords words and a string S, make all appearances of all keywords in S bold. Any le ...

  7. [LeetCode] Binary Tree Tilt 二叉树的坡度

    Given a binary tree, return the tilt of the whole tree. The tilt of a tree node is defined as the ab ...

  8. 【阿里聚安全·安全周刊】互联网时代人类还有被遗忘的权利吗 | Android与中兴

    本周七个关键词:互联网时代丨中兴和Android丨安卓厂商和安全补丁丨移动支付安全丨泰国移动运营商泄密丨格式化硬盘的恶意程序丨代码签名滥用 -1-   [互联网] 互联网时代 人类还有被遗忘的权利吗 ...

  9. [HNOI 2016]最小公倍数

    Description 题库链接 给定一张 \(N\) 个顶点 \(M\) 条边的无向图(顶点编号为 \(1,2,\cdots,n\) ),每条边上带有权值.所有权值都可以分解成 \(2^a\time ...

  10. [HNOI2012]双十字

    题目描述 在C 部落,双十字是非常重要的一个部落标志.所谓双十字,如下面两个例子,由两条水平的和一条竖直的”1“线段组成,要求满足以下几个限制: ![] 我们可以找到 5 个满足条件的双十字,分别如下 ...