HTML中使用富文本工具

何小凡

已于 2022-12-01 11:03:56 修改

阅读量1.5k

点赞数

分类专栏：笔记文章标签： javascript 开发语言 html css

于 2022-11-25 16:58:14 首次发布

本文链接：https://blog.csdn.net/hexianfan/article/details/128040470

版权

笔记专栏收录该内容

73 篇文章 0 订阅

订阅专栏

KindEditor 使用方法

<head>
    <th:block th:include="include :: KindEditor-css"/>
</head>
<body>
	<div>
		<textarea id="description" name="description" style="width: 100%;height: 270px;"></textarea>
	</div>

	<th:block th:include="include :: KindEditor-js"/>
	<script type="text/javascript">
		var editor;
    	KindEditor.ready(function (K) {
        	editor = K.create('#description',{
            	themeType: 'default'
        	});
    	})
	</script>
</body>

<!-- KindEditor富文本编辑器插件css -->
<div th:fragment="KindEditor-css">
	<link th:href="@{/ajax/libs/KindEditor/themes/default/default.css}"/>
	<link th:href="@{/ajax/libs/KindEditor/themes/simple/simple.css}"/>
</div>

<!-- KindEditor富文本编辑器插件js -->
<div th:fragment="KindEditor-js">
	<script th:src="@{/ajax/libs/KindEditor/kindeditor.js}"></script>
	<script th:src="@{/ajax/libs/KindEditor/lang/zh-CN.js}"></script>
</div>

参考文档：K.create(expr [, options])
阿里云盘文件提取：https://www.aliyundrive.com/s/mPGjMirHwzF
提取码：4rv6

ueditor 使用方法

<head>
    <th:block th:include="include :: ueditor-css"/>
</head>
<body>
	<div>
		<div id="container" name="content"></div>
	</div>

	<th:block th:include="include :: ueditor-js"/>
	<script type="text/javascript">
		var ue = UE.getEditor('container');
	</script>
</body>

<!-- ueditor 富文本编辑器插件css -->
<div th:fragment="ueditor-css">
	<link th:href="@{/ajax/libs/ueditor/dist/utf8-php/themes/default/css/ueditor.css}"/>
</div>

<!-- ueditor 富文本编辑器插件js -->
<div th:fragment="ueditor-js">
	<script th:src="@{/ajax/libs/ueditor/dist/utf8-php/ueditor.config.js}"></script>
	<script th:src="@{/ajax/libs/ueditor/dist/utf8-php/ueditor.all.js}"></script>
</div>