一个菜鸟的互联网技术分享博客
您的位置: 主页 > 项目中使用逼格较高的富文本编辑器(tinymce)心得
advertisement

项目中使用逼格较高的富文本编辑器(tinymce)心得

背景:最近在使用vue-element-admin写一个后台管理系统,刚好碰到要上传详情页的对产品描述的部分,所以就要使用富文本编辑器了(vue-element-admin官方对富文本的选择使用也做了相关推荐【飞机票】),那么我们就直接来讲怎么使用和一些坑吧(这里主要以html页面做解释)。

1、了解TinyMCE富文本编辑器

2、下载富文本编辑器所需的文件资料


3、
TinyMCE官网免费注册获取key(用于js的cnd时候填写key),同时还要填写一些个人信息才可以拿到对应的key


4、经过了步骤2以后会下载拿到一个如下图所示的文件夹,然后新建一个demo.html文件


5、然后编写代码,如下所示:


  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script src="tinymce.min.js" referrerpolicy="origin"></script>  
  5.     </head>  
  6.     <body>  
  7.         <textarea>Welcome to TinyMCE!</textarea>  
  8.         <script>  
  9.             tinymce.init({  
  10.                 selector: 'textarea'  
  11.             });  
  12.         </script>  
  13.     </body>  
  14. </html>  
效果图如下:

6、切换引文版

原装的富文本编辑器是英文的,如果你想使用中文的话,请点击Language Packages | TinyMCE这里(如下大图所示),下载对应语言的js文件。
下载成功后,把文件解压,放在langs/…文件夹中,把文件夹放入解决方案。

7、在js部分加入转语言代码(
language: 'zh_CN'),如下所示:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script src="tinymce.min.js" referrerpolicy="origin"></script>  
  5.         <script src="./langs/zh_CN.js"></script>  
  6.     </head>  
  7.     <body>  
  8.         <textarea id="mytextarea">Hello, World!</textarea>  
  9.         <script>  
  10.             tinymce.init({  
  11.                 selector: 'textarea',  
  12.                 language: 'zh_CN'  
  13.             });  
  14.         </script>  
  15.     </body>  
  16. </html>  

8、在浏览器中查看效果,效果图如下:

9、
想要在后台接受富文本编辑器中内容,则需要把 <textarea id="mytextarea">Hello, World!</textarea> 添加name属性,然后在后台接受

  1. <textarea id="mytextarea" name="content">Hello, World!</textarea>   

10、使用string content=context.Request["content"];来接收文本即可。

以上就是静态页面中用
Tinymce的方法了,那么vue中使用Tinymce就更加简单了,官方都封装好了的接口,直接使用即可,使用连接


最后在给一版全功能版本的代码吧,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script src="tinymce.min.js" referrerpolicy="origin"></script>  
  5.         <script src="./langs/zh_CN.js"></script>  
  6.     </head>  
  7.     <style>  
  8.     </style>  
  9.     <body>  
  10.         <textarea id="mytextarea" name="content">Hello, World!</textarea>  
  11.         <script>  
  12.             var aaa = tinymce.init({  
  13.                 selector: '#mytextarea',  
  14.                 // skin:'oxide-dark',  
  15.                 language: 'zh_CN',  
  16.                 plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs importword kityformula-editor',  
  17.                 toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \  
  18.                              styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \  
  19.                              table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs importword kityformula-editor',  
  20.                 height: 650//编辑器高度  
  21.                 min_height: 400,  
  22.                 width:1200,  
  23.                 /*content_css: [ //可设置编辑区内容展示的css,谨慎使用 
  24.                     '/static/reset.css', 
  25.                     '/static/ax.css', 
  26.                     '/static/css.css', 
  27.                 ],*/  
  28.                 fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',  
  29.                 font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',  
  30.                 link_list: [{  
  31.                         title: '预置链接1',  
  32.                         value: 'http://www.tinymce.com'  
  33.                     },  
  34.                     {  
  35.                         title: '预置链接2',  
  36.                         value: 'http://tinymce.ax-z.cn'  
  37.                     }  
  38.                 ],  
  39.                 image_list: [{  
  40.                         title: '预置图片1',  
  41.                         value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png'  
  42.                     },  
  43.                     {  
  44.                         title: '预置图片2',  
  45.                         value: 'https://www.baidu.com/img/bd_logo1.png'  
  46.                     }  
  47.                 ],  
  48.                 image_class_list: [{  
  49.                         title: 'None',  
  50.                         value: ''  
  51.                     },  
  52.                     {  
  53.                         title: 'Some class',  
  54.                         value: 'class-name'  
  55.                     }  
  56.                 ],  
  57.                 //importcss_append: true,  
  58.                 //自定义文件选择器的回调内容  
  59.                 file_picker_callback: function(callback, value, meta) {  
  60.                     if (meta.filetype === 'file') {  
  61.                         callback('https://www.baidu.com/img/bd_logo1.png', {  
  62.                             text: 'My text'  
  63.                         });  
  64.                     }  
  65.                     if (meta.filetype === 'image') {  
  66.                         callback('https://www.baidu.com/img/bd_logo1.png', {  
  67.                             alt: 'My alt text'  
  68.                         });  
  69.                     }  
  70.                     if (meta.filetype === 'media') {  
  71.                         callback('movie.mp4', {  
  72.                             source2: 'alt.ogg',  
  73.                             poster: 'https://www.baidu.com/img/bd_logo1.png'  
  74.                         });  
  75.                     }  
  76.                 },  
  77.                 //为内容模板插件提供预置模板  
  78.                 templates: [{  
  79.                         title: '模板1',  
  80.                         description: '介绍文字1',  
  81.                         content: '模板内容'  
  82.                     },  
  83.                     {  
  84.                         title: '模板2',  
  85.                         description: '介绍文字2',  
  86.                         content: '<div class="mceTmpl"><span class="cdate">CDATE</span>,<span class="mdate">MDATE</span>,我的内容</div>'  
  87.                     }  
  88.                 ],  
  89.                 //content_security_policy: "script-src *;",  
  90.                 extended_valid_elements: 'script[src]',  
  91.                 //  
  92.                 template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',  
  93.                 template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',  
  94.                 autosave_ask_before_unload: false,  
  95.                 toolbar_mode: 'wrap',  
  96.                 automatic_uploads: false,  
  97.                 images_upload_base_path: '/demo',  
  98.                 images_upload_handler: function(blobInfo, succFun, failFun) {  
  99.                     succFun('/demo/images/img.jpg');  
  100.                 },  
  101.                 //icons:'ax-color',  
  102.   
  103.             });  
  104.         </script>  
  105.     </body>  
  106. </html> 

效果图如下:

部分参考资料如下:参考1参考2
zhangren.online
上一篇:HTML页面中的images懒加载
下一篇:没有了

您可能喜欢

​原生JS实现鼠标悬停tab切换

​原生JS实现鼠标悬停tab切换

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

​javaascript之数字倒计时

​javaascript之数字倒计时

回到顶部