资讯专栏INFORMATION COLUMN

Ckeditor富文本编辑器

cpupro / 1446人阅读

摘要:开发工具与关键技术撰写时间下面我们讲富文本编辑器的使用要使用富文本编辑器,需要在官网中下载插件,下载后会得到一个文件其中包含以下文件,我们主要使用的是文件在页面中使用在页面中标签引用标签是富文本编辑器的操作对象,在需要

开发工具与关键技术: MVC
撰写时间:2021/9/28

下面我们讲Ckeditor富文本编辑器的使用;

  1. 要使用Ckeditor富文本编辑器,需要在Ckeditor官网中下载js插件,下载后会得到一个ckeditor文件:

    其中包含以下文件,我们主要使用的是ckeditor.js文件:

  2. 在页面中使用ckeditor.js:
    (1) 在页面中script标签引用ckeditor.js

    (2) textarea标签是富文本编辑器的操作对象,在需要使用富文本编辑器的页面代码位置插入textarea标签,给定一个特定id,在js中编辑页面加载时,使用ckeditor.js中的CKEDITOR.replace(“ textarea标签ID ”)方法渲染富文本编辑器,如下:

    最终页面上渲染成功之后是这样子的:

  3. 富文本框中图片的上传:
    (1) 首先我们需要在控制器中编写一个方法,对富文本框中的图片进行处理:

    (2) 然后我们需要打开下载的ckeditor文件中的 config.js,将filebrowserImageUploadUrl,设置到上一步对图片处理的方法路径,否则图片将无法上传:
    (3) 刚刚处理图片文件的方法中用到的储存返回图片数据的实体类,需要我们自行编辑,上面图片文件处理完成之后,最终会将图片数据存储到该实体类创建的对象中返回:

以上就是Ckeditor富文本编辑器的一些使用方法,希望对大家有所帮助。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/121352.html

相关文章

  • Django搭建个人博客:使用django-ckeditor文本辑器

    摘要:后面两个编辑器自带,不用单独下载,添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器,还得对代码稍加改动。对于有些不喜欢的人来说,甚至可以连博文都使用提供的富文本编辑器。 前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了,你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体...

    beanlam 评论0 收藏0
  • 文本辑器CKeditor的配置和图片上传,看完不后悔

    摘要:是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心。第一步如何使用官网下载,分别是简易版标准版全面版自定义四个选项,下载哪个根据你的诉求来。 CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心。 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit...

    MartinHan 评论0 收藏0
  • 文本辑器CKeditor的配置和图片上传,看完不后悔

    摘要:是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心。第一步如何使用官网下载,分别是简易版标准版全面版自定义四个选项,下载哪个根据你的诉求来。 CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心。 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit...

    nidaye 评论0 收藏0
  • laravel5.1 -- Integrate FileManager and CKeditor i

    摘要:中文名叫文件管理器,也叫文件浏览器,它给我们提供了一个可视化的界面来管理文件和文件夹。利用,我们可以对文件进行浏览增加打印修改文件属性重命名搜索等等一大堆非常有用的操作。相信朋友们都非常熟悉了,它是一种富文本编辑器,不再赘述。 FileManager中文名叫文件管理器,也叫文件浏览器,它给我们提供了一个可视化的界面来管理文件和文件夹。利用FileManager,我们可以对文件进行浏览、...

    VPointer 评论0 收藏0
  • 手摸手,带你用vue撸后台 系列三(实战篇)

    摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...

    Channe 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<