学习
实践
活动
工具
TVP
写文章

vue富文本编辑器插件推荐_elementui富文本编辑器

富文本编辑器官网 http://tinymce.ax-z.cn 安装 npm install tinymce -S npm install @tinymce/tinymce-vue -S 下载语言包 语言包 下载完之后在项目里新建public文件夹 1)在public目录下新建tinymce文件夹,并将下载的语言包解压到该目录下 2)在node_modules里面找到tinymce,将skins from 'tinymce/tinymce' //tinymce默认hidden,不引入不显示 import Editor from '@tinymce/tinymce-vue'//编辑器引入 import 'tinymce/themes/silver/theme'//编辑器主题 import 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标 // 引入编辑器插件 注:当遇到报错信息 Uncaught SyntaxError: Unexpected token ‘<‘ 时,检查引入的 语言包 和 编辑器主题 的路径是否正确 原文 版权声明:本文内容由互联网用户自发贡献

14320

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

二、着手解决 网上随便搜了一把,就找到了避免 JQ 重复加载的方法。将如下代码添加到主题的 function.php 当中即可: //禁止加载默认jq库 if ( ! ":".mce-btn","tinymce_button":"a.mce_crayon_tinymce,.mce-i-crayon_tinymce","tinymce_button_unique":"mce_crayon_tinymce 于是找到由 Crayon Syntax Highlighter 插件弹出的那个图片的 ID,然后对这个 ID 设置隐藏 CSS 属性就搞定了! 至此,Crayon Syntax Highlighter 插件终于和知更鸟主题和睦共处了!真是不容易啊.... 值得注意的是,JQuery 请使用 1.7~1.8 左右版本,太高版本中可能会缺少知更鸟主题部分所需功能。

45340
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

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

    WordPress自带TinyMCE编辑器相关功能增强

    WordPress 默认的那个编辑器叫做TinyMCETinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。 ";')); 添加编辑器默认内容(编辑器内可见) 新建文章后编辑器里的内容默认是空的,有些朋友做的是WordPress主题站、插件站或单纯的下载站,一些标准的格式化的文章每次都会输入“主题名称”、“主题作者 content; } add_filter ('default_content', 'insertPreContent'); 添加更多的HTML标签(慎用) 此功能请慎用,因为WordPress自带的TinyMCE 添加方法:将以下代码粘贴到主题的functions.php文件里即可: WordPress自带编辑器的强大往往被人忽略,很大程度上就是其隐藏的编辑按钮默认情况下没有被显示出来而已。 步骤二:把刚才写好的my_quicktags.js放在主题文件夹,再在主题 functions.php 中加入代码: add_action('admin_print_scripts', 'my_quicktags

    1K50

    WordPress 3.9+的 TinyMCE 4 编辑器增强开发

    从WordPress 3.9版本后,WordPress 默认的编辑器 TinyMCE 随之升级到了版本4,带来的问题以前在默认编辑器上的增强开发的效果可能失效。 这篇文章旨在破旧立新,通过几个例子给大家带来几个TinyMCE4 编辑器的增强开发技巧。 还原字体种类及大小选择按钮 默认的话,字体种类及大小这两个按钮没有添加到TinyMCE 编辑器中,通过下面的函数,就可以实现有下拉形式的字体种类及大小这两个按钮。 add_action( 'init', 'wpex_mce_google_fonts_styles' ); 增加编辑器的下拉菜单功能 先看图,就知道实现的效果是什么了,这个的话在 Devework主题的 js的代码如下: (function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton

    44260

    vue2.0 实现富文本编辑器功能【前端】

    一、总结 1.各个编辑器之间的较量 UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型, -S 2.导入 (1)在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下/也可以是其他assets目录,看自己的选择,不是固定 目录 (4)import import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue' tinymce-vue 是一个组件,需要在 components 中注册,然后直接使用 <editor id="<em>tinymce</em>" v-model 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/image

    99930

    WordPress怎么自定义默认电子邮件名称和地址?

    WordPress自带的TinyMCE编辑器,对于一般的文字编辑已足够了,但还是有童鞋希望它功能更多,所以诞生了各种编辑器增强插件,其实不用插件也可以为默认编辑器增加各种功能,下面的方法可以为编辑器增加选择中文字体功能 1、将如下代码加到当前主题的 functions.php 模板文件中: function custum_fontfamily($initArray){ $initArray['font_formats 幼圆';"; return $initArray;}add_filter('tiny_mce_before_init', 'custum_fontfamily'); 2、WordPress默认TinyMCE 编辑器并没有选择字体功能,所以还需要把下面代码也一同加到 functions.php 模板文件中: function enable_more_buttons($buttons) {$buttons[]

    5500

    tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器

    TinyMCE中文文档地址:http://tinymce.ax-z.cn/ vue项目集成TinyMCE编辑器 1、安装 vue-cli版本:4.4.0 安装tinymce npm install tinymce -S tinymce版本:5.3.1 安装tinymce-vue npm install @tinymce/tinymce-vue -S tinymce-vue是tinymce官方提供的一个vue组件 这两个组件安装完之后,在public目录下新建文件夹static/tinymce,目录建好后,找到node_modules文件夹下的tinymce/skins目录,将skins目录复制到我们创建的static 3、组件编写 新建一个组件,在此我把它命名为imcoder-tinymce.vue 在组件中我们引入tinymce import tinymce from "tinymce/tinymce"; import 如果出现这种状况,则是因为没有引入字体图标组件 ​ ?

    16.8K113

    解决新版wordpress打开速度超级慢的问题

    下面是在网上找到的办法,本人懒,采用的第二种方法,问题已经解决。 第一、取消谷歌Open sans字体加载(wp更新不受影响) 1、添加代码法 通过禁用谷歌字体,把主题中的function.php文件用ftp下载文件下载到本地;同时,建议将服务器上function.php 哪些文件调用了 Google Fonts 和 Google Ajax 的服务 WordPress 3.5 之前的版本中,核心程序和自带主题没有调用 Google Fonts 和 Google Ajax functions.php 文件外,WordPress 自带编辑器的样式文件也调用了 Google Fonts 服务:wp-includes/script-loader.phpwp-includes/js/tinymce 这样的小版本),和 WordPress 3.8 版本一样,只是 WordPress 自带编辑器的样式文件更换了位置:wp-includes/script-loader.phpwp-includes/js/tinymce

    2.1K30

    Vue项目中使用Tinymce

    但是我却花费了一个小时来搞这个, 因为我咋也粘贴不上, 所以不得不提一下这个坑:就因为我用的chrome开发, chrome浏览器直接在文件中复制粘贴图片是无法粘贴上的, 但是可以从微信输入框等地方粘贴上,也能拖入, 我暂时还没有进一步去做 : 375, // 预览宽度 plugin_preview_height: 668, 设置完预览之后发现图片大于预览宽度, 出现了滚动,于是找到了一个content_style属性, 可以设置css 对于图片地址处理思路如下: 为自己的服务器设置一个白名单, 将页面中非白名单内的图片链接地址传给后台,让后台去把这些图片放到自己服务器并返回给我新图片链接 然后我再更新对应的图片链接; 这里面主要涉及到: 找到所有图片链接 更新对应的图片链接 本来是打算使用正则来找到图片, 获得服务器返回的内容,再使用正则匹配替换, 后来发现TinyMCE提供了urlconverter_callback用于处理url替换, 它有四个参数 由于这个函数没有没有提供回调函数,当异步从服务器取回新地址时,renturn回去的url是不等人的, 我试了使用await来解决,但是发现它不支持异步来处理,所有只好放弃,采用这种方式变向处理,让用户点击保存时再去匹配并替换内容

    2.3K20

    Vue富文本编辑器_前端富文本编辑器插件

    vue-tinymce版本:1.1.2 安装tinymce-vue npm install @tinymce/tinymce-vue@3.0.1 -S tinymce-vue版本:3.0.1 tinymce-vue 这两个组件安装完之后,在public目录下新建文件夹static/tinymce,目录建好后(如果没有public文件,就在index.html同级的static中创建tinymce文件),找到node_modules import tinymce from "tinymce/tinymce"; import Editor from "@tinymce/tinymce-vue"; import "tinymce/themes ({ }); // 这里传个空对象就可以了 }, 如果出现以下报错,则可能是路径配置错误,仔细检查路径是否写错 如果出现这种状况,则是因为没有引入字体图标组件 手动引入就好 import "tinymce from "tinymce/tinymce"; import Editor from "@tinymce/tinymce-vue"; import "tinymce/icons/default/icons

    22220

    三种插件开发模式,带你玩废tinymce

    下面我将分享3种方式,带你玩废 tinymce,适合接触过 tinymce 的 小伙伴,如果没有接触过 就随便看看,收藏也不吃亏,保不齐,后面用得上,知道可以这样玩就好了 利用tinymce官方提供的 tinymce 相关配置和API web components 基本概念 我们有了大致了解 ,下面还需要再了解一下 tinymce 中 需要用到的相关配置和API 配置只需要关注 custom_elements 哪该如何转化,还得再了解认识一下 tinymce tinymce 富文本中编辑的数据 会抽象为 ASTNode (可以直接看成tinymce官方自制简易版的DOM树),如打印出来如下图 既然有转换

    </tp-codegrou> 架子搭好了,就得开始完善逻辑 并与 tinymce 结合起来 首先 先在 ("tinymce.util.I18n"); var global$6 = tinymce.util.Tools.resolve("tinymce.util.XHR"); export const initPlugin

    12330

    最好用的 6 款 Vue 3 富文本编辑器

    TinyMCE - 富文本编辑器里的 Word ,功能想不到的丰富 TinyMCE 是富文本编辑器领域的头部玩家之一,主流富文本编辑器,功能非常全,你需要的大多数功能它都支持。 它甚至有点像在线版的 Word,可以在顶部的各种菜单中找到你要的功能。但它的优势也恰恰是它的劣势,如此之多的功能都放上来导致整个编辑器非常重,如果只是需要简单功能,上这么复杂的编辑器,大材小用。 TinyMCE 对 Vue.js 的集成和安装非常友好,支持 Vue3 和 TypeScript,文档写的也非常好。 六. summernote - 恰到好处的轻,可直接粘贴图片 summernote 是一款轻量级富文本编辑器,它的所有功能都在界面上了,如果这些功能你需要的场景恰巧够用,那么恭喜你了,你找到了轻便趁手的富文本编辑器 Trumbowyg 功能非常简单,你看我上面实际安装后的测试截图就知道,没有太多复杂的功能。但它有个突出特点,就是小,压缩后仅有 8kb 大。

    3.2K10

    WordPress中的rel=”noopener”是什么意思?

    它对您的WordPress网站的SEO排名或整体WordPress表现没有影响。noopener与nofollow之间有什么区别? 它有利于您网站的安全性,并且对您的网站没有任何性能或SEO影响。但是,如果必须将其删除,则必须在WordPress中禁用Gutenberg块编辑器并使用旧的经典编辑器。 之后,您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。 add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');function tinymce_allow_unsafe_link_target 没有充分的理由这样做。由 主机教程网 2bcd.com 首发于 主机教程网原文链接:https://2bcd.com/2569.html

    7930

    何如在Win7使用Aero2主题

    Luna.Metallic.xaml Windows XP 上的银色主题。 Windows 8 之后WPF更新了Aero2和AeroLite两种主题,关于Aero、Aero2、AeroLite的区别具体可见这个网页。再之后微软就没有更新WPF主题了。 解决方案 知道问题原因后,要解决这个问题就很简单了,随随便便都能想到3个: 在Windows10电脑上找到C:\Windows\Microsoft.NET\Framework\v4.0.30319 简单测试了看上去都没问题,不过,其实,可是我都没有用这三个方案。 4. 实际上根本不需要Aero2? 我以前面对的客户群体都比较单一所以没有太多兼容性方面的经验,所以这次才踩了这么明显的坑,不知道有没有这方面的完整的指南? 6.

    69860

    不重新编译DLL,让FCKEditor支持附件上传

    目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差。 TinyMCE 也是一个开源的富文本编辑器,不过名气没有FCKEditor大,功能还是不错。 KindEditor 一个国人开发的富文本编辑器,貌似还不错,没有深入研究。 SharePoint的富文本编辑器,功能很弱,做的很烂,在MOSS中直接使用还好,如果不是MOSS环境那就完全没有必要使用了。 …… 介绍了那么多,接下来还是回到主题,说说FCKEditor的配置修改吧。 具体修改方法就是打开fckeditor文件夹下的fckconfig.js文件,找到FCKConfig.LinkUploadURL ,修改如下: FCKConfig.LinkUploadURL = FCKConfig.BasePath

    8520

    何如在Win7使用Aero2主题

    Luna.Metallic.xaml Windows XP 上的银色主题。 Windows 8 之后WPF更新了Aero2和AeroLite两种主题,关于Aero、Aero2、AeroLite的区别具体可见这个网页。再之后微软就没有更新WPF主题了。 Aero ? 解决方案 知道问题原因后,要解决这个问题就很简单了,随随便便都能想到3个: 在Windows10电脑上找到C:\Windows\Microsoft.NET\Framework\v4.0.30319\WPF 简单测试了看上去都没问题,不过,其实,可是我都没有用这三个方案。 4. 实际上根本不需要Aero2? 我以前面对的客户群体都比较单一所以没有太多兼容性方面的经验,所以这次才踩了这么明显的坑,不知道有没有这方面的完整的指南? 6.

    51920

    扫码关注腾讯云开发者

    领取腾讯云代金券