展开

关键词

ckeditor 从入门到放弃

真心复杂 有一个 CKEDITOR 的全局空间, 有一个 CKEDITOR.instances的全局实例引用 有 Classic 编辑和 Inline 编辑两种模式 有 Plugin 也有 Widget 加载 <script src="js/<em>ckeditor</em>/<em>ckeditor</em>.js"></script> 生成编辑器 经典编辑(Classic Editing) <textarea id="editor"> Toolbar 被定制过,则需要显性配置 toolbar让其显示 config.toolbar = {   {name: 'insert', ['Timestamp']} } 挂件(Widget) 挂件是由一组 html 的高级内容过滤器,当用户在源码输入模式、editor.setData输入、直接粘贴 html 代码等输入时候,将不希望出现的内容给过滤掉。 实战建议 能用 CKEditor 社区插件解决的问题,用插件解决 插件解决不了的问题,业务自己写plugin 或者 widget 解决 业务自己写的部分,尽量不要用 CKEditor 自带的 CKEDITOR.dialog

62900

前端使用ckeditor

本文链接:https://blog.csdn.net/bbwangj/article/details/100025915 一、导入js文件 <script src="js/plugins/<em>ckeditor</em> /<em>ckeditor</em>.js"></script> 将下载的文件导入相应html目录下 二、html代码 <textarea rows="20" class="form-control" name="liasionContent [ <em>CKEDITOR</em>.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单 [ <em>CKEDITOR</em>.CTRL + 90 /*Z [ <em>CKEDITOR</em>.CTRL + <em>CKEDITOR</em>.SHIFT + 90 /*Z*/, 'redo' ], // [ <em>CKEDITOR</em>.CTRL + 76 / [ <em>CKEDITOR</em>.CTRL + 73 /*I*/, 'italic' ], //斜体 [ <em>CKEDITOR</em>.CTRL + 85 /*U*/, 'underline

55140
  • 广告
    关闭

    腾讯云618采购季来袭!

    腾讯云618采购季:2核2G云服务器爆品秒杀低至18元!云产品首单0.8折起,企业用户购买域名1元起,还可一键领取6188元代金券,购后抽奖,iPhone、iPad等你拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Spring Boot集成CKEditor

    CKEditor is a free, Open Source HTML text editor designed to simplify website content creation. index.html中引入ckeditor.js。 如果想定制样式在config.js中就可以,另外写一个js也可以,不过需要html中需要引入,会覆盖掉config.js中的配置。 集成后的效果: ? file.isEmpty()) { try { response.setContentType("text/html; charset=UTF-8 上面可以看出,提交到后台的是一段html文本。来验证一下,页面上随便来点文本,加点样式,上传个图片。 ?

    68230

    django-富文本-ckeditor配置

    django-ckeditor 安装 $ pip install django-ckeditor 注册 # settings.py ... # Application definition INSTALLED_APPS \Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\ 目录中,名称是 codesinppet 配置 在 settings.py 中添加自己的 ckeditor 配置,如下 # settings.py ... # ckeditor CKEDITOR_CONFIGS = { # 将这份配置命名为 my_config 'my_config 没有自带的,只需要在网上把插件下载到 ckeditor\static\ckeditor\ckeditor\plugins\ 目录中,再进行配置即可。 highlight.pack.js 就是需要引用的 js 库(可在“…\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet

    51320

    python mako ckeditor 两坑

    坑1:html在django 的mako模版中进行转义: 数据库内html标记转义: 数据库中既有这样的数据: <p>&lt;p&gt;&amp;lt;p&amp ; 也有这样的数据:  

  • 针对小厂商和大厂商不同灰度策略支持
  • 通过下面的方法可以将<转义为可渲染的html页面内容: <%! 兼容性不好,导致后台在是使用富文本编辑器类似ckeditor保存数据时会自动添加html标签,用新版本1.11以上的django和ckeditor未发现此问题。 解决方法: 修改ckeditor的config.js文件 /** * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license */ CKEDITOR.editorConfig = function

    33520

    ckeditor5-基础使用

    npm install --save @ckeditor/ckeditor5-build-classic  # Or:  npm install --save @ckeditor/ckeditor5-build-inline   # Or:  npm install --save @ckeditor/ckeditor5-build-balloon  # Or:  npm install --save @ckeditor/ckeditor5 -build-decoupled-document 3.zip包下载 点击下载ckeditor压缩包 二、基础使用 快速在自己的网页里放入编辑器还是比较简单的,只需要以下一个步骤: 1、html中添加一个元素用来放编辑器 DOCTYPE html>  <html lang="en">  <head>  <meta charset="utf-8">  <title>CKEditor 5 – Classic editor</ document.querySelector( '#editor' ) )  .catch( error => { console.error( error ); } ); </script>  </body>  </html

    2.1K20

    django使用ckeditor上传图片

    'ckeditor', # 富文本编辑器   'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ] # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = ''  # 图片ckeditor文件上传路径,这里使用七牛云存储,不填 2、html页面中加入textarea标签

    3、页面中引入控制html页面的JS和ckeditor的JS文件, 在django的installed_app中注册应用时,会自动在虚拟环境中生成应用信息/home/python/.virtualenvs /django_1.11.16_py3/lib/python3.5/site-packages/ckeditor/static/ckeditor/ckeditor/ 在js路径前加上域名,否则服务器会在 rest_framework.permissions import IsAuthenticated from rest_framework.views import APIView from django.utils.html

    1K10

    快速开始 - 构建文档 - ckeditor5中文文档

    Classic编辑器 在你的html页面中添加一个用来替换成CKEditor的元素: <textarea name="content" id="editor"></textarea> 加载classic DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>CKEditor 5 – Classic editor DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>CKEditor 5 - Inline editor DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>CKEditor 5 – Balloon editor DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>CKEditor 5 – Document editor

    2.5K20

    flask 富文本编辑器(flask 22)

    =CKEditor(app) app.config['CKEDITOR_SERVE_LOCAL'] = True app.config['CKEDITOR_FILE_UPLOADER'] = 'upload_for_ckeditor return render_template('post.html', title=title, body=body) return render_template('ckeditor.html', body = CKEditorField('Body', validators=[DataRequired()]) submit = SubmitField('Publish') templates/ckeditor.html {% extends 'base.html' %} {% from 'macros.html' import form_field %} {% block content %}

    Integrate () }} {{ ckeditor.config(name='body') }} {% endblock %} post.html {% extends 'base.html' %} {% block

    44120

    ckeditor解决首行缩进问题

    文章时间:2020年11月28日 17:17:15 解决问题:ckeditor编辑器解决首行缩进2个字符的问题,国人的习惯不能改。 打开ckeditor.js文件,使用ctrl+f进行搜索。

    9720

    ckeditor4与vue集成

    公司的项目开始使用的是ckeditor5,由于ckeditor5目前功能还不够完善,所以不得不替换成ckeditor4,以下记录一下vue-cli项目与ckeditor的集成方法。 加载ckeditor 修改vue项目中的index.html <! DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="renderer"  content="webkit"> -- built files will be auto injected -->   </body> </html> 复制以下内容,作为一个vue组件 <template>    

    基于 Django 的个人网站(3)

    settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)+staticfiles_urlpatterns() 接着去按照 Prism 官网给的教程去修改 文章详情页面的 html DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ article.title }}</title article.abstract }}

    {{ article.content|safe }} <script src="/static/js/prism.js"></script> </body> </html DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ article.title }}</title article.abstract }}

    {{ article.content|safe }} <script src="/static/js/prism.js"></script> </body> </html

    38630

    常见问题 - 构建文档 - ckeditor5中文文档

    例如,ckeditor5-basic-styles包处理HTML元素,例如等,以及它们在模型中的表示。 该功能定义了HTML(视图)和编辑器模型之间的双向转换。 如果你希望支持所有HTML5元素,则需要编写插件来支持它们。 一旦你这样做,CKEditor 5将不会过滤任何东西。 如何打开源代码模式? 如何编写源代码模式插件? CKEditor 5是内容编辑器,而不是页面构建器,除非某些编辑器功能(插件)支持某种特定类型的HTML(或任何其他输入格式),否则将不被接受为内容。 有关的详细信息,请参阅github上的问题。 在CKEditor 5中,HTML只是众多可能的输出格式之一。 您可以在专用指南中了解有关更改模型的更多信息。 要插入一些较长的HTML代码,您可以先将其解析为模型片段,然后将其插入编辑器模型中: const content = '

    A paragraph with <a href="https://<em>ckeditor</em>.com

    1.9K40

    Laravel5.6框架使用CKEditor5相关配置详解

    /ckeditor4/latest/guide/dev_file_upload.html#response-file-uploaded-successfully 创建符号链接 php artisan 相关配置 CKEditor配置参数:https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html CKEDITOR.replace /ckeditor4/latest/api/CKEDITOR_config.html#cfg-fileTools_requestHeaders 首先,在页面head部分添加csrf参数 <! ckeditor/plugins/image/dialogs/image.js ckeditor/plugins/flash/dialogs/flash.js ckeditor/plugins/link 附录:ckeditor隐藏“浏览服务器”按钮 由于ckeditor中的”上传图片””上传文件””上传FLASH” 三个功能中都有“浏览服务器”按钮,所以我们要修改3个JS文件,先打开ckeditor文件夹中的

    29440

    基于 Django 的个人网站(2)

    django-ckeditor 的安装 django-ckeditor 的安装非常简单,直接:pip install django-ckeditor 就行了,安装完成之后如图所示。 ? ? django-ckeditor 的使用 使用 django-ckeditor 非常简单,因为我这里安装的是 django-ckeditor-5,和 django-ckeditor 差不多,但是也还是有一些区别的 ' 视图层完事之后我们就需要去编写模板层,也就是 html 文件,并把数据显示到 html 上面,打开 templates\index.html,编写如下所示的代码。 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>陈志豪的个人网站</title> </head> ' 下面添加的 ArticleDetailView 就是文章详情页面视图类,接着去编写其对应的模板 html 文件,打开 templates\article_detail.html,代码如下: <!

    30120

    如何在不影响asp.net默认安全性的前提下使用ckeditorfckeditor?

    asp.net默认情况下,不允许提交包含html源代码的表单,这在很大程度上防止了跨站(提交)攻击,但是ckeditor/fckeditor之类的富文本编辑器肯定是要生成html源代码的,如何解决这个矛盾 思路: 客户端--表单中增加一个隐藏域,提交时先把ckeditor/fck的内容用url编码后,赋值给该隐藏域,然后清空ckeditor/fck,再提交,这样提交过去的内容就不包含html源代码了。 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title 如果您的浏览器不支持或禁止运行Javascript,您只能用常规方式在普通文本输入框里编辑html代码

    </noscript>

    50690

    Jsp中如何使用Ckeditor富文本编译器以及实现上传文件的功能

    (此处选择标准版) http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.6.2 让ckeditor处理文本框(editor1为文本框的id) /OC/ckeditor/为第二步拷贝的ckeditor文件的目录,OC为自己项目名。 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath :replace replace="editor1" basePath="/OC/<em>ckeditor</em>/" />** </form> </body> </html> 扩展:如何实现上传文件的功能 target = new File(targetDirectory,fileName); response.setHeader("Content-type", "text/html

    9520

    Django CKEdirtor配置(图

    注:pycharm Django2.0  CKEditor4 一.CKEditor引入 1 1.CKEditor引入(下载的ckeditor包直接粘贴到static内) 2 <script type="text/javascript" src="/static/<em>ckeditor</em>/<em>ckeditor</em>.js"></script> 3 <script type="text/javascript 5 config.width = 790.5; 6 config.height = 400; 7 config.filebrowserImageUploadUrl = '/itbg/bgimg.<em>html</em> /'; // 图片上传路径 8 config.uploadUrl='/itbg/bgimg.<em>html</em>/'; 9 //图片粘贴(上行只是支持编辑器的“图像”上传。 这行可以直接桌面拖拽图片和从word复制多张图片到编辑器) 10 config.filebrowserUploadUrl='/itbg/bgimg.<em>html</em>/' 11 //附件上传(如需要上传附件如.zip

    23810

    相关产品

    • 文档服务

      文档服务

      文档服务(DS)由腾讯云数据万象提供,支持多种类型的文件生成图片或 html 格式的预览,可以解决文档内容的页面展示问题,满足多端的文档在线浏览需求。同时,还提供文本隐私筛查能力,可以有效识别文本中的身份证号、手机号等敏感数据,满足数据可用性和隐私保护的各种要求。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券