精华内容
下载资源
问答
  • tinymce编辑器
    2022-08-18 11:03:39

    记录TinyMCE编辑器

    TinyMCE初始化

    tinyMCE.init({
              selector: '#tbNewsContent',
              language: 'zh-Hans',//转中文
              branding: false,
              convert_urls: false,
              plugins: 'wordcount,emoticons,link,image,table,help',
              images_upload_url: '/ajax/UploadImage.ashx?Type=editupload',//图片处理程序
    	  });
    

    TinyMCE取值

    tinyMCE.get('tbNewsContent').getContent();
    

    TinyMCE赋值

    tinyMCE.get('tbNewsContent').setContent('内容')
    
    更多相关内容
  • TinyMCE编辑器使用

    2022-06-16 11:58:11
    tinyMCE引入及使用方式,使用tinyMCE实现图片上传

    一、引入TinyMCE

    (1)、下载tinyMCE资源包文件 : http://download.tiny.cloud/tinymce/community/tinymce_5.10.0.zip 放入项目(测试发现最新5.11.版本展示有点问题,建议下载10)

    (2)、下载中文包文件:http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js 放入资源包的langs中

    (3)、页面引入

    <#--引入tinymce    -->
    	<script type="text/javascript" src="${base}/js/tinymce/tinymce.min.js"></script>
    
    

    二、使用

    1、初始化

    // html中 创建一个textarea
    <textarea id="content" style="width:100%;" class="ued-textarea"></textarea>
    
    //js中
    //tinyMce初始化
            var editor = tinymce.init({
                selector: '#content',
                language:'zh_CN',
                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 autoresize ',
                toolbar: 'code undo redo restoredraft | cut copy paste pastetext |formatselect fontselect fontsizeselect | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
         bullist numlist | blockquote subscript superscript removeformat | \
        image charmap emoticons hr pagebreak insertdatetime preview | fullscreen | lineheight',
                height: 450, //编辑器高度
                min_height: 300,
                /*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;',
                importcss_append: true,
                //tinyMce自定义图片上传
                images_upload_handler: function(blobInfo, success, failure) {
                    var form = new FormData();
                    form.append('files', blobInfo.blob(), blobInfo.filename());
                    $.ajax({
                        url: url,
                        type: "post",
                        data: form,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            success(data.location);
                        },
                        error: function(e) {
                            alert("图片上传失败");
                        }
                    });
                },
                file_picker_callback: function(callback, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.onchange = function() {
                        var file = this.files[0];
                        var form = new FormData();
                        form.append("files", file);
                        $.ajax({
                            url: url,
                            type: "post",
                            data: form,
                            processData: false,
                            contentType: false,
                            success: function(data) {
                                callback(data.location);
                            },
                            error: function(e) {
                                alert("图片上传失败");
                            }
                        });
                    };
                    input.click();
                },
                autosave_ask_before_unload: false,
            });
        }
    
    
    

    给编辑器赋内容方式:tinyMCE.activeEditor.setContent(‘内容’)

    获取编辑器内容:tinyMCE.activeEditor.getContent()

    参考tinyMCE中文文档: http://tinymce.ax-z.cn/

    展开全文
  • ## TinyMCE编辑器,用于Laravel和Lumen框架强大的WYSIWYG编辑器,易于安装,并且已配置为可以快速,简单地使用。 如何使用 只需在他的视图中添加该行,就在<textarea id="tinymce">上方: @include('tinymce::...
  • TinyMCE编辑器集成 TinyMCE编辑器集成是一个最先进的插件,将企业级所见即所得HTML编辑器与现代CMS 集成在一起。 撇开这句话,这是您在使用Markdown从内创作页面时感到厌倦,害怕或不满意时应使用的。 它具有广泛...
  • tinymce编辑器

    2019-03-15 01:09:45
    tinymce_org.rar,tinymce_org,tinymce,changelog.txt,jscripts,tiny_mce,license.txt,plugins,print,editor_plugin.js,editor_plugin_src.js,directionality,editor_plugin.js,editor_plugin_src.js,emotions,img,...
  • TinyMCE是一个基于浏览器的所见即所得编辑器,平台独立于Web之外,支持目前流行的各种浏览器,由javascript写成。这个编辑器可工作在Mozilla, firefox和MSIE上.很多网站系统都采用了 TinyMCE,其中包括 Wordpress。...
  • tinymce编辑器组件

    2022-07-04 13:33:38
    包括格式刷,百度地图,多图上传功能(后台需要自己写)
  • vue3使用tinymce编辑器

    2022-06-08 09:17:03
    vue3使用tinymce编辑器

    1.npm安装tinymce编辑器

    npm install tinymce@^5.10.2
    npm install @tinymce/tinymce-vue@^4.0.5
    

    2.在public下面创建tinymce文件夹

    在这里插入图片描述

    3.下载中文包zh_CN.js

    zh_CN.js

    4.复制node_modules下面skins文件夹

    在这里插入图片描述

    5.开始使用

    5.1组件
    <template>
      <div class="tinymce-box">
        <Editor id="myedit" v-model="content" :init="init" tag-name="div" :disabled="disabled"/>
      </div>
    </template>
    
    <script>
    //引入tinymce编辑器
    import Editor from "@tinymce/tinymce-vue";
    
    //引入方式引入node_modules里的tinymce相关文件文件
    import tinymce from "tinymce/tinymce"; //tinymce默认hidden,不引入则不显示编辑器
    import "tinymce/themes/silver"; //编辑器主题,不引入则报错
    import "tinymce/icons/default"; //引入编辑器图标icon,不引入则不显示对应图标
    
    // 引入编辑器插件
    import "tinymce/plugins/advlist"; //高级列表
    import "tinymce/plugins/anchor"; //锚点
    import "tinymce/plugins/autolink"; //自动链接
    import "tinymce/plugins/autoresize"; //编辑器高度自适应,注:plugins里引入此插件时,Init里设置的height将失效
    import "tinymce/plugins/autosave"; //自动存稿
    import "tinymce/plugins/charmap"; //特殊字符
    import "tinymce/plugins/code"; //编辑源码
    import "tinymce/plugins/codesample"; //代码示例
    import "tinymce/plugins/directionality"; //文字方向
    import "tinymce/plugins/emoticons"; //表情
    import "tinymce/plugins/fullpage"; //文档属性
    import "tinymce/plugins/fullscreen"; //全屏
    import "tinymce/plugins/help"; //帮助
    import "tinymce/plugins/hr"; //水平分割线
    import "tinymce/plugins/image"; //插入编辑图片
    import "tinymce/plugins/importcss"; //引入css
    import "tinymce/plugins/insertdatetime"; //插入日期时间
    import "tinymce/plugins/link"; //超链接
    import "tinymce/plugins/lists"; //列表插件
    import "tinymce/plugins/media"; //插入编辑媒体
    import "tinymce/plugins/nonbreaking"; //插入不间断空格
    import "tinymce/plugins/pagebreak"; //插入分页符
    import "tinymce/plugins/paste"; //粘贴插件
    import "tinymce/plugins/preview"; //预览
    import "tinymce/plugins/print"; //打印
    import "tinymce/plugins/quickbars"; //快速工具栏
    import "tinymce/plugins/save"; //保存
    import "tinymce/plugins/searchreplace"; //查找替换
    // import 'tinymce/plugins/spellchecker'  //拼写检查,暂未加入汉化,不建议使用
    import "tinymce/plugins/tabfocus"; //切入切出,按tab键切出编辑器,切入页面其他输入框中
    import "tinymce/plugins/table"; //表格
    import "tinymce/plugins/template"; //内容模板
    import "tinymce/plugins/textcolor"; //文字颜色
    import "tinymce/plugins/textpattern"; //快速排版
    import "tinymce/plugins/toc"; //目录生成器
    import "tinymce/plugins/visualblocks"; //显示元素范围
    import "tinymce/plugins/visualchars"; //显示不可见字符
    import "tinymce/plugins/wordcount"; //字数统计
    import { ref, watch,defineComponent } from "vue";
    export default defineComponent({
      name: "TEditor",
      components: {
        Editor,
      },
      props: {
        modelValue: {
          type: String,
          default: "",
        },
        disabled: {
          type: Boolean,
          default: false,
        },
        plugins: {
          type: [String, Array],
          default:
            "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ",
        },
        toolbar: {
          type: [String, Array],
          default:
            "fullscreen 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 | code selectall | indent2em lineheight formatpainter axupimgs",
        },
        height: {
          type: Number,
          default: 500,
        },
      },
      emits:["update"],
      setup(props, {emit}) {
        const init = {
          language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
          language: "zh_CN", //语言类型
    
          skin_url: "/tinymce/skins/ui/oxide", //皮肤:浅色
          // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤:暗色
    
          plugins: props.plugins, //插件配置
          // toolbar: props.toolbar, //工具栏配置,设为false则隐藏
          toolbar_mode: "sliding",
          menubar: "file edit insert view format table tools", //菜单栏配置,设为false则隐藏,不配置则默认显示全部菜单,也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
          menu: {
            // file: { title: '文件', items: 'newdocument' },
            edit: {
              title: "编辑",
              items: "undo redo | cut copy paste pastetext | selectall",
            },
            insert: { title: "插入", items: "link image  |  hr" },
            view: { title: "查看", items: "visualaid" },
            // format: {
            //   title: '格式',
            //   items:
            //     'bold italic underline strikethrough superscript subscript | formats | removeformat',
            // },
            // table: { title: '表格', items: 'inserttable tableprops deletetable | cell row column' },
            // tools: { title: '工具', items: 'spellchecker code' },
          },
          fontsize_formats:
            "12px 14px 16px 18px 20px 22px 24px 28px 32px 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;",
    
          height: props.height, //注:引入autoresize插件时,此属性失效
          placeholder: "在这里输入文字",
          branding: false, //tiny技术支持信息是否显示
          resize: false, //编辑器宽高是否可变,false-否,true-高可变,'both'-宽高均可,注意引号
          statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
          elementpath: false, //元素路径是否显示
    
          content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
          // content_css: '/skins/content/default/content.css',  //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入
          content_css: "/public/tinymce/skins/content/default/content.css",
          // images_upload_url: '/demo/upimg.php',  //后端处理程序的url
          // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
          // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
          // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
          images_upload_handler: (blobInfo, success, failure) => {
            const img = "data:image/jpeg;base64," + blobInfo.base64();
            success(img);
          },
        };
        tinymce.init; // 初始化
    
        const revert_data = (content) => {
          emit("update", content);
        };
        // 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        // 需要什么事件可以自己增加
    
        const setEditMode = (type) => {
          tinymce.editors["myedit"].setMode(type); //开启只读模式
        };
        const content = ref();
        watch(
          () => props.modelValue,
          () => {
            content.value = props.modelValue;
          },
          { deep: true, immediate: true }
        );
        watch(
          () => content.value,
          () => {
            revert_data(content.value);
          },
          { deep: true, immediate: true }
        );
        return {
          content,
          init,
          revert_data,
          setEditMode,
        };
      },
    });
    </script>
    
    
    5.2页面上引入后注册使用
    <TEditor ref="editor" v-model="txt_editor" @update="updated($event)" />
    

    6.如果使用弹窗可能会出现层级过低不显示问题

    可以更改如下文件z-index层级(.tox .tox-editor-header{z-index:1}不可更改)在这里插入图片描述

    7.效果如下

    在这里插入图片描述

    展开全文
  • 解决tinymce编辑器内不能预览视频,替换tinymce/plugins/media/plugin.min.js即可。因为默认富文本编辑器内是一个img标签,并不能播放。
  • Tinymce富文本也是一款很流行编辑器  把文件放在static下,然后在index.html文件中引入这个文件 [removed][removed] <tinymce height=200 ref=editor v-model=editForm.fdcNote></tinymce>  在其他子文件中引入...
  • Laravel Nova TinyMCE编辑器(具有图像上传功能!) 这个Nova软件包允许您将用于文本区域。 您可以自定义编辑器选项,然后...您可以将图像上传到服务器,然后将其放置在内容上,而无需离开文本编辑器!!安装...
  • 简体中文tinymce编辑器插件下载 简体中文tinymce编辑器插件下载
  • 安装说明从npm安装tinymce 从npm安装ngx-tinymce-editornpm install tinymce --savenpm install ngx-tinymce-editor --save推荐将ngx-tinymce-editor导入到您的根AppModule 。 将node_modules/tinymce/skins复制到...
  • React使用TinyMce编辑器

    2021-12-12 21:12:34
    React使用TinyMce编辑器一、效果1.1编辑器界面图1.2 代码页面渲染视图二、详细使用2.1 依赖安装2.2 TinyEditor配置2.3 配置config-overrides.js2.4 配置.babelrc按语言需求加载 这个网站刚开始的时候,使用的是...

    这个网站刚开始的时候,使用的是CKEditor,但是后面再次使用发现TinyMce Editor更加强大,可用渲染代码,可用预览、全面编辑代码、查看编辑器的HTML代码,所以用TinyMce Editor代替了CKEditor的使用。但是在配置和使用的过程中发现了很多问题,通过自己的努力解决了,开这个帖子来记录一下,方便更多学习的人。先看看效果如何,然后再说详细实现

    一、效果

    1.1编辑器界面图

    1.2 代码页面渲染视图

    二、详细使用

    上面说了TinyMce Eidtor的使用,然后我们来说是它的详细实现

    2.1 依赖安装

    yarn add @tinymce/tinymce-react
    yarn add babel-plugin-prismjs
    由于这里使用了react-app-rewired,所以还需要再加多几个依赖
    yarn add react-app-rewired
    yarn add customize-cra
    

    2.2 TinyEditor配置

    import React from 'react'
    import { Editor } from '@tinymce/tinymce-react';
    import { uploadFile } from '@/api'
    
    export default class TinyEditor extends React.Component {
    
        imagesUploadHandler = async (blobInfo, success, failure, progress) => {
            var data = new FormData();
            data.append('files', blobInfo.blob(), blobInfo.filename());
            let res = await uploadFile(data);
            if (res) {
                let { errno } = res;
                if (errno === 0) {
                    success(res.data[0]);//return Json Format is ["imageUrl","imageUrl1"]
                } else {
                    failure("图片上传失败")
                }
            } else {
                failure("图片上传失败")
            }
        }
    
        handleEditorChange = (e) => {
            console.log(e);
        }
    
        render() {
            return (
                <Editor
                    initialValue=""
                    apiKey="hq72bjfug6s56a5qxa2oxpbqsxc58nv4v7nfruyd5ndpgu72"
                    init={{
                        height: 500,
                        plugins: [
                            'advlist autolink lists link image charmap print preview anchor',
                            'searchreplace visualblocks code fullscreen',
                            'insertdatetime media table paste code help wordcount imagetools codesample'
                        ],
                        toolbar:
                            'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter alignright alignjustify |bullist numlist outdent indent | removeformat |image|codesample|code|preview|fullscreen | help',
                        menu: {
                            file: { title: '文件', items: 'newdocument restoredraft | preview | print ' },
                            edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
                            view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
                            insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
                            format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
                            tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
                            table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
                            favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | spellchecker | emoticons' }
                        },
                        menubar: 'file edit view insert format tools table',
                        codesample_languages: [
                            { text: 'HTML/XML', value: 'markup' },
                            { text: 'JavaScript', value: 'javascript' },
                            { text: 'CSS', value: 'css' },
                            { text: 'PHP', value: 'php' },
                            { text: 'Ruby', value: 'ruby' },
                            { text: 'Python', value: 'python' },
                            { text: 'Java', value: 'java' },
                            { text: 'C', value: 'c' },
                            { text: 'C#', value: 'csharp' },
                            { text: 'C++', value: 'cpp' },
                            { text: 'Scala', value: 'scala' }
                        ],
                        language: "zh_CN",
                        image_uploadtab: true,
                        images_upload_handler: this.imagesUploadHandler
                    }}
                    onEditorChange={this.handleEditorChange}
                />
            );
        }
    }
    

    到这里就完成了TinyEditor的配置,打开页面就可以看到TinyEditor的使用了,在代码块,TinyEditor保存的时候,把代码以
    <pre class=“language-css”><code></code></pre>的html的代码来保存的,在前端渲染的时候,prismjs根据保存的<pre><code></code></pre>来渲染,需要配置一下,下面详细详解

    2.3 配置config-overrides.js

    const path = require('path')
    const {
        override,
        addWebpackAlias,
        useBabelRc
    } = require('customize-cra')
    module.exports = override(
        addWebpackAlias({
            '@': path.resolve(__dirname, 'src'),
            'components': path.resolve(__dirname, 'src/components'),
            'utils': path.resolve(__dirname, 'src/utils'),
            'views': path.resolve(__dirname, 'src/views'),
            'img': path.resolve(__dirname, 'src/img')
        }),
        useBabelRc(),
    )
    

    2.4 配置.babelrc按语言需求加载

    {
        "plugins": [
          ["prismjs", {
              "languages": ["javascript", "css", "markup","java"],
              "plugins": ["line-numbers"],
              "theme": "default",
              "css": true
          }]
        ]
    }
    

    .babelrc的位置如下图所示:

    然后再需要显示的界面通过调用Prism.highlightAll()来渲染效果,如下所示:

    import React from 'react'
    import Prism from 'prismjs';
    
    export default class CodeExample extends React.Component {
    
        componentWillMount() {
    
        }
    
        componentDidMount() {
            Prism.highlightAll();
        }
    
        render() {
    
            return (<div style={{ textAlign: "left" }}>
                This is a test!!!<br />
                <pre className='language-java'>
                    <code>public static void main()&#123;
                    return 0;
                    &#125;
                    </code>
                </pre>
            </div>
            )
        }
    }
    

    首页心情随笔韶华追忆技术分享个人归档博客留言关于我
    您现在的位置是:首页 > 技术分享 >
    React使用TinyMce编辑器
    班班2020-07-12 18:11:55
    这个网站刚开始的时候,使用的是CKEditor,但是后面再次使用发现TinyMce Editor更加强大,可用渲染代码,可用预览、全面编辑代码、查看编辑器的HTML代码,所以用TinyMce Editor代替了CKEditor的使用。但是在配置和使用的过程中发现了很多问题,通过自己的努力解决了,开这个帖子来记录一下,方便更多学习的人。先看看效果如何,然后再说详细实现

    一、效果

    1.编辑器界面图

    2.代码页面渲染视图

    二、详细使用

    上面说了TinyMce Eidtor的使用,然后我们来说是它的详细实现

    1.依赖安装

    yarn add @tinymce/tinymce-react
    yarn add babel-plugin-prismjs
    由于这里使用了react-app-rewired,所以还需要再加多几个依赖
    yarn add react-app-rewired
    yarn add customize-cra
    2.TinyEditor配置

    import React from ‘react’
    import { Editor } from ‘@tinymce/tinymce-react’;
    import { uploadFile } from ‘@/api’

    export default class TinyEditor extends React.Component {

    imagesUploadHandler = async (blobInfo, success, failure, progress) => {
        var data = new FormData();
        data.append('files', blobInfo.blob(), blobInfo.filename());
        let res = await uploadFile(data);
        if (res) {
            let { errno } = res;
            if (errno === 0) {
                success(res.data[0]);//return Json Format is ["imageUrl","imageUrl1"]
            } else {
                failure("图片上传失败")
            }
        } else {
            failure("图片上传失败")
        }
    }
    
    handleEditorChange = (e) => {
        console.log(e);
    }
    
    render() {
        return (
            <Editor
                initialValue=""
                apiKey="hq72bjfug6s56a5qxa2oxpbqsxc58nv4v7nfruyd5ndpgu72"
                init={{
                    height: 500,
                    plugins: [
                        'advlist autolink lists link image charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime media table paste code help wordcount imagetools codesample'
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter alignright alignjustify |bullist numlist outdent indent | removeformat |image|codesample|code|preview|fullscreen | help',
                    menu: {
                        file: { title: '文件', items: 'newdocument restoredraft | preview | print ' },
                        edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
                        view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
                        insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
                        format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
                        tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
                        table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
                        favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | spellchecker | emoticons' }
                    },
                    menubar: 'file edit view insert format tools table',
                    codesample_languages: [
                        { text: 'HTML/XML', value: 'markup' },
                        { text: 'JavaScript', value: 'javascript' },
                        { text: 'CSS', value: 'css' },
                        { text: 'PHP', value: 'php' },
                        { text: 'Ruby', value: 'ruby' },
                        { text: 'Python', value: 'python' },
                        { text: 'Java', value: 'java' },
                        { text: 'C', value: 'c' },
                        { text: 'C#', value: 'csharp' },
                        { text: 'C++', value: 'cpp' },
                        { text: 'Scala', value: 'scala' }
                    ],
                    language: "zh_CN",
                    image_uploadtab: true,
                    images_upload_handler: this.imagesUploadHandler
                }}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
    

    }
    到这里就完成了TinyEditor的配置,打开页面就可以看到TinyEditor的使用了,在代码块,TinyEditor保存的时候,把代码以

    的html的代码来保存的,在前端渲染的时候,prismjs根据保存的
    来渲染,需要配置一下,下面详细详解

    3.配置config-overrides.js

    const path = require(‘path’)
    const {
    override,
    addWebpackAlias,
    useBabelRc
    } = require(‘customize-cra’)
    module.exports = override(
    addWebpackAlias({
    ‘@’: path.resolve(__dirname, ‘src’),
    ‘components’: path.resolve(__dirname, ‘src/components’),
    ‘utils’: path.resolve(__dirname, ‘src/utils’),
    ‘views’: path.resolve(__dirname, ‘src/views’),
    ‘img’: path.resolve(__dirname, ‘src/img’)
    }),
    useBabelRc(),
    )
    4.配置.babelrc按语言需求加载

    {
    “plugins”: [
    [“prismjs”, {
    “languages”: [“javascript”, “css”, “markup”,“java”],
    “plugins”: [“line-numbers”],
    “theme”: “default”,
    “css”: true
    }]
    ]
    }
    .babelrc的位置如下图所示:

    .babelrc文件的位置

    然后再需要显示的界面通过调用Prism.highlightAll()来渲染效果,如下所示:

    import React from ‘react’
    import Prism from ‘prismjs’;

    export default class CodeExample extends React.Component {

    componentWillMount() {
    
    }
    
    componentDidMount() {
        Prism.highlightAll();
    }
    
    render() {
    
        return (<div style={{ textAlign: "left" }}>
            This is a test!!!<br />
            <pre className='language-java'>
                <code>public static void main()&#123;
                return 0;
                &#125;
                </code>
            </pre>
        </div>
        )
    }
    

    }
    到这里位置TinyMceEditor的详细配置就完成了,为例方便大家学习,我还把代码上端到GitHub上供大家学习

    地址为:

    https://github.com/banbansmile/tinymce-react

    展开全文
  • WordPress 的 Bootstrap TinyMCE 样式将 Bootstrap 样式添加到 WordPress TinyMCE 编辑器,以便使用 Bootstrap 组件轻松访问您的内容样式。安装将bootstrap-tinymce-styles文件夹上传到/wp-content/plugins/目录通过...
  • 可以在此页面中查看演示和示例:演示和示例安装$ npm install vue-tinymce-editor如何使用从'vue'导入import Vue从'vue-tinymce-editor'导入tinymce Vue.component('tinymce', tinymce)您可以在标记中使用该组件 ...
  • vue使用tinymce编辑器上传图片
  • tinymce编辑器

    2021-02-24 11:19:56
    tinymce编辑器
  • wagtailtinymce:针对Wagtail的TinyMCE编辑器集成
  • tinyMCE编辑器没有实时更新
  • 在做form表单提交时,使用tinymce富文本编辑器,这里是我提交的数据 查看一下数据库 提交正常,没问题。但是当我在做回显的时候,课程简介这里出了问题,其他信息正常显示,唯独课程简介不显示 这是回显时前端页面的...
  • TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,采用JavaScript/ECMAScript开发,主要特性包括主题/模板支持,多语言支持(包括简体中文),支持通过插件的方式进行扩展。功能配置...
  • 在使用link插件之后。编辑器内的右键全部变成了链接,将很多好用的右键菜单都屏蔽了
  • tinymce编辑器实现视频上传功能

    千次阅读 2021-06-15 23:29:53
    tinymce编辑器部分代码 //编辑器 var content = ""; var edit = ""; layui.extend({ tinymce: './tinymce/tinymce'//你的富文本组件路径 }).use(['tinymce'], function () { var t = layui.tinymce; t.render({ ...
  • TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费。 TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,...
  • 无奈之下找了找好像tinymce这个编辑器可以满足,但是在此之前没用过,所以去通读了一边官方网址,了解了一些基本东西。 然后开干 最开始么肯定是先安装一下插件 npm install tinymce/tinymce-vue --save npm install...
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为例说明: 将tinymce下载后放到static目录...
  • 上次我们分享过一款网页编辑器jQuery轻量级网页...今天我们要来分享一款基于tinymce的CSS3可视化网页编辑器编辑器功能相当完善,可以对文本进行各种操作,也可以添加链接和对齐文本。是一款功能更加强大网页编辑器
  • 需要在编辑器中实现图片上传功能, 刚开始使用的是 ckeditor , 但是在做图片上传功能时有遇到一些问题(ckeditor 将图片上传这块的前端代码以及json格式设定了,不太好.), 最终尝试使用 TinyMCE 编辑器.tinyMCE 编辑器...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,561
精华内容 2,624
关键字:

tinymce编辑器