TinyMCE富文本
作者：程序员11 时间：2023-07-05 人气：119 QQ交流群\邮箱:1003265987@qq.com
TinyMCE富文本
要展示的内容
下载链接：
链接：https://pan.baidu.com/s/1DPPVa80w0odaXuAKEVLZxw?pwd=my9l
提取码：my9l
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery/3.6.4/jquery.js"></script>
<link href="./prism/prism.css" rel="stylesheet" type="text/css">
<script src="./prism/prism.js"></script>
<script src='./tinymce_5.10.0/tinymce/js/tinymce/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#mytextarea',
language_url : './tinymce_5.10.0/tinymce/js/tinymce/langs/zh-Hans.js',
language:'zh_CN',//注意大小写
codesample_global_prismjs:true,//允许调用用户自己引入的prism.js和prism.css
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
],
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: 'codesample code | 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') {
console.log("file");
callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
}
if (meta.filetype === 'image') {
console.log("image");
callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
}
if (meta.filetype === 'media') {
console.log(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>
</head>
<body>
<h1>TinyMCE快速开始示例</h1>
<form id="myform" action="" method="post" enctype = "multipart/form-data">
<textarea id="mytextarea" name="mytextarea"></textarea>
</form>
<div id="setcontent"></div>
<pre class=" line-numbers language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prism.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prism.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>language-markup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<button id="submit">提交</button>
</body>
<script>
$("#submit").click(function(){
var cnt = tinymce.editors["mytextarea"].getContent();
console.log(cnt);
$("#setcontent").html(cnt)
$('pre').addClass("line-numbers").css("white-space", "pre-wrap");
document.querySelectorAll("code").forEach(block => Prism.highlightElement(block)); //Prism 异步要加这段，不然提
//鼠标移入移出点击事件
$('.code-toolbar').each(function(i) {
var str = " <span class='copy' style='color:#fff;cursor:pointer;position:absolute;top:0;right:10px;' onclick='copy("+i+")'>复制</span>";
$(this).append(str);
let className = $(this).children("pre").attr('class')
className = className.match(/language-(S*)/)[1]
console.log(className)
var str1 = " <span class='language' style='color:#fff;cursor:pointer;position:absolute;top:0;right:60px;' onclick='copy("+i+")'>"+className+"</span>";
$(this).append(str1);
});
$(".code-toolbar").on({
mouseout: function () {
console.log("移出")
let copy = $(this).find(".copy")
copy.css({"display":"none"})
let language = $(this).find(".language")
language.css({"display":"none"})
},
mouseover: function () {
console.log("移入")
let copy = $(this).find(".copy")
copy.css({"display":"flex"})
let language = $(this).find(".language")
language.css({"display":"flex"})
},
click: function () {
}
})
});
// 复制功能
function copy(i){
var text = $("pre code").eq(i).text();
var input = document.createElement('textarea');
input.value = $.htmlPrefilter(text);
document.body.appendChild(input);
input.select(); // 选取文本域中的内容.
document.execCommand("Copy");
//再移除输入框
document.body.removeChild(input);
alert("复制成功！");
}
</script>
</html>
温馨提示:
欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。
HTML5-热门文章
活跃用户
