Tinymce富文本使用过程

最新推荐文章于 2024-03-18 21:30:31 发布

IT周小白

最新推荐文章于 2024-03-18 21:30:31 发布

阅读量413

点赞数

文章标签： spring java 后端

本文链接：https://blog.youkuaiyun.com/zhoulijia666/article/details/126386592

版权

获取文件包

官网文档：www.tiny.cloud/docs/

社区版及开发版官方最新打包地址：www.tiny.cloud/get-tiny/self-hosted/

汉化包：tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

1.解压后的文件夹直接放入到项目中

2.引用Tinymce的js，因为我的js往外三层才到放tinymce.min.js存放位置，所以有../../../

<script type="text/javascript" src="../../../lims/plugins/tinymce/js/tinymce/tinymce.min.js"></script>

3.初始化Tinymce编辑器,下方初始化是引用经典编辑器布局，需要简化可去官网搜索配置

<script>
   tinymce.init({
      language: "zh-Hans",
      selector: '#mytextarea',
      plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
      toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
   styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
   table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
      height: 650, //编辑器高度
      min_height: 400,
      /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
               '/static/reset.css',
               '/static/ax.css',
               '/static/css.css',
           ],*/
      fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
      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;',
      link_list: [
         { title: '预置链接1', value: 'http://www.tinymce.com' },
         { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
      ],
      image_list: [
         { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
         { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
      ],
      image_class_list: [
         { title: 'None', value: '' },
         { title: 'Some class', value: 'class-name' }
      ],
      importcss_append: true,
      //自定义文件选择器的回调内容
      file_picker_callback: function (callback, value, meta) {
         if (meta.filetype === 'file') {
            callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
         }
         if (meta.filetype === 'image') {
            callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
         }
         if (meta.filetype === 'media') {
            callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
         }
      },
      toolbar_sticky: true,
      autosave_ask_before_unload: false,
   });
</script>

4.配置texter块，注意有个小坑，在初始化编辑器后要看当前js或者HTML的头<!DOCTYPE html>，是否在最上方，如果初始化编辑器的上方没有输入语句那么也不用在乎，否则要放在其上方。

<div class="col-xs-12">
   <textarea id="mytextarea">${qcSampleReceive.samplingRecord}</textarea>
</div>

5.拿值放值

如果当前页面只有一个编辑器

获取内容：tinyMCE.activeEditor.getContent()

设置内容：tinyMCE.activeEditor.setContent("需要设置的编辑器内容")

如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）

获取内容：tinyMCE.editors[0].getContent()

设置内容：tinyMCE.editors[0].setContent("需要设置的编辑器内容")